title: How to fit to screen after changing viewport width on orientation change?
body: <p>I need the viewport width for a page to be 950px in landscape and 630px in portrait. These pixel widths are unfortunately inflexible.</p>
  
  <p>I'm adjusting the width of the DOM content based on orientation using CSS media queries.</p>
  
  <p>I'm listening for orientation change events in JS to resize the viewport on orientation change.</p>
  
  <p>Everything looks good on initial page load (portrait or landscape).</p>
  
  <p>However, after an orientation change, Mobile Safari preserves the previous scale setting, instead of fitting the viewport to the screen. A double-tap or two straightens it out. But I need that to be automatic.</p>
  
  <p>I've attached the source below, and uploaded it to a demo <a href="http://adamflorin.com/xfer/stackoverflow/ios-orientation/" rel="nofollow noreferrer">URL</a>.</p>
  
  <p>Below are screen captures taken after orientation changes: from landscape to portrait, and from portrait to landscape.</p>
  
  <p>How can I force Safari to automatically set the viewport width to the screen width? Or am I going about this all wrong?</p>
  
  <p>Changing the various scale settings in the viewport have not helped. Setting <code>maximum-scale=1.0</code> or <code>initial-scale=1.0</code> appears to override my <code>width</code>, setting <code>width</code> to <code>device-width</code> (i.e. 1024 or 768 on my iPad 2), leaving dead margin space. Setting <code>minimum-scale=1.0</code> appears to do nothing.</p>
  
  <p><img src="https://i.stack.imgur.com/n9uAs.png" alt="From landscape to portrait"></p>
  
  <p><img src="https://i.stack.imgur.com/tnARB.png" alt="From portrait to landscape"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;iPad orientation&lt;/title&gt;
  
        &lt;meta name="viewport" content="user-scalable=yes"&gt;
  
        &lt;script src="jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
        &lt;script type="text/javascript" charset="utf-8"&gt;;
          /**
          * update viewport width on orientation change
          */
          function adapt_to_orientation() {
            // determine new screen_width
            var screen_width;
            if (window.orientation == 0 || window.orientation == 180) {
              // portrait
              screen_width = 630;
            } else if (window.orientation == 90 || window.orientation == -90) {
              // landscape
              screen_width = 950;
            }
  
            // resize meta viewport
            $('meta[name=viewport]').attr('content', 'width='+screen_width);
          }
  
          $(document).ready(function() {
  
            // bind to handler
            $('body').bind('orientationchange', adapt_to_orientation);
  
            // call now
            adapt_to_orientation();
          });
  
        &lt;/script&gt;
        &lt;style type="text/css" media="screen"&gt;
          body {
            margin: 0;
          }
          #block {
            background-color: #333;
            color: #fff;
            font-size: 128px;
  
            /* landscape */
            width: 950px;
          }
          #block .right {
            float: right
          }
          @media only screen and (orientation:portrait) {
            #block {
              width: 630px;
            }
          }
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="block"&gt;
          &lt;div class="right"&gt;&amp;rarr;&lt;/div&gt;
          &lt;div class="left"&gt;&amp;larr;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>