title: Meta viewport hell
body: <p>I have designed a responsive web site and built a prototype with Compass Susy. </p>
  
  <p>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).</p>
  
  <p>I have tried several things, and I notice that changing the meta viewport tag from 
  <code>&lt;meta content="width=device-width, initial-scale=1" name="viewport"&gt;</code> to
  <code>&lt;meta content="width=device-width" name="viewport"&gt;</code> (removing initial scale) the jump does not occur.  </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>What do I need to do here?</p>