0

I'm having problems getting the iPhone's Mobile Safari scaling to work as expected. I'm using Susy for the grid:

$total-columns  : 12;
$column-width   : 60px;
$gutter-width   : 32px;
$grid-padding   : $gutter-width/2;
$container-style: static;

And I'm using this viewport meta tag:

meta name="viewport" content="width=device-width"

The problem is that some pages don't scale down completely on the iPhone. This seems to happen only when the page's height is less than its width. So instead of seeing the whole width of the page, the page scales down until it has filled the viewport height-wise. 'Longer' pages scale down as expected.

I am not sure how to troubleshoot this. I've tried several different things with the grid as well as the meta tag but to no avail.

Daniel Baars
  • 41
  • 1
  • 2

1 Answers1

0

Use this meta tag

<meta name = "viewport" content = "height=device-height, width = device-width,
    initial-scale = .1, user-scalable = yes">

Give the initial-scale as your need.

Ramaraj T
  • 5,184
  • 4
  • 35
  • 68
  • Thanks for that, very interesting. It solved a problem but created a few more: initial-scale = .3 works well for the iPhone in portrait mode but looks silly in landscape and on the iPad. Is there a way to make it bit more 'intelligent'? – Daniel Baars Nov 07 '12 at 09:04
  • http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html – Ramaraj T Nov 07 '12 at 09:19
  • Suresh, thanks for your updated answer. Unfortunately adding the height doesn't help either. Still the same problems. Since the standard 'width=device-width' usually works very well I'm beginning to think there's something wrong with my Susy based grid but I have NO idea what that could be. – Daniel Baars Nov 07 '12 at 10:51
  • I don't know about css clearly. But may be this can help you. http://stackoverflow.com/questions/2313194/can-i-trigger-a-css-event-in-mobile-safari-upon-iphone-orientation-change – Ramaraj T Nov 07 '12 at 10:53
  • Sorry, but it is not working. Eventually I "solved" it by putting '@media (max-width: 768px) { #page {min-height: 1500px;} }' in the CSS file. Not very elegant but it works. – Daniel Baars Nov 08 '12 at 07:13