Meta viewport hell

1
votes

I have designed a responsive web site and built a prototype with Compass Susy.

The problem I am having, on Mobile Safari on iPad and iPhone, is that when I load the site in portrait mode, then rotate to landscape, the entire layout jumps maybe 30% to the right (it also scales up the zoom to fit the 480px landscape width).

I have tried several things, and I notice that changing the meta viewport tag from <meta content="width=device-width, initial-scale=1" name="viewport"> to <meta content="width=device-width" name="viewport"> (removing initial scale) the jump does not occur.

However, without that property, my phone layout is too small, even at the initial portrait view. It's flush left with a gutter down the right, in both orientations.

I have tried enlarging the columns in the Susy grid, and although it clearly makes the layout wider on other platforms, on the phone is still zooms down to show that gutter on the right. So it's a viewport issue of some kind.

With initial scale set, on Android it fits, on rotate to landscape it does not jump, but stays 320px (with margins on right and left).

What do I need to do here?

2
mobile-safarimedia-queriesviewportcompass-sassdevice-orientation

2 Answers

1
votes

I'll try not to be too vague, not knowing how the structure of your html is set up... But you might try the following steps and let me know if it works:

  1. Use the code Lokase provided, but remove the "user-scalable=0" part.
  2. Wrap everything in your tag in two blank divs. The first one give "id='x'", the second one give "class='resizer'". Don't forget your tags at the end.
  3. Add the following to your stylesheet: div:firstchild div.resizer { width:100% } #x {display:block}

This should load the doc at viewport width but still give user scalability.

It's kind of a botch-job, but it worked on a mobile site I did for a client recently.

0
votes

Try this:

<meta name="HandheldFriendly"   content="True">
<meta name="MobileOptimized"    content="320">
<meta name="viewport"           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">