title: Mobile Safari Reflow without Resize - buggy behavior
body: <p><strong>Edit 2</strong> This question is looking for a smooth, clean way to <em>reflow text</em> on the iPhone.</p>
  
  <p>Improving a web app to have 2 different widths (320 &amp; 480) depending on the orientation. The intent is also to have 480 wide available for non mobile (ie > 480 width) screens. It is working mostly as desired, except for when the page is refreshed in landscape. This causes the layout to go back to 320 (on the left side) and leave a dark bar on the right. </p>
  
  <ul>
  <li>Load in Portrait</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/otfmP.png" alt="1. Portrait (after load)"><br></p>
  
  <ul>
  <li>Rotate to Landscape</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/CJpPP.png" alt="2. Landscape (after rotate)"><br></p>
  
  <ul>
  <li>Refresh in Landscape <br></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/wt8S7.png" alt="3. Landscape (after refresh)">
  <br><br>
  It takes rotating to portrait and back to get resize and image 2 again. That is a usability issue for me. The page resizes &amp; rotates great on Android and is 'full-size' on desktop.<br><br>
  Anyone know what I'm missing? I've attempted many iterations of this and read about a couple bug solutions. None of the ideas are changing the outcome. About to file a bugreport. I have a hunch it is in the lines of the media query #container. </p>
  
  <p><strong>Edit: The site was built for mobile (320 wide). The desire is to expand the usage of space when that space is available. The main intent is to have text &amp; elements reflow.</strong>  Looking at the photos, notice the alignment of the input fields with their labels. 
  <br><br>
  I have tried 2 approaches to make this work. Other was to use javascript to change #container width. Currently using with the following media queries at the end of inline style sheet. I prefer to solve this with media query.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="HandheldFriendly" content="True"&gt;
      &lt;meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;title&gt;The Title&lt;/title&gt;
      &lt;style type="text/css"&gt;
          html {
              margin: 0;
              padding: 0;
          }
          body {
              font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
          }
          #container {
              margin: auto;
              width: 480px;
           .....
          @media screen and (max-width: 480px) {
              body {
                  -webkit-text-size-adjust: none;
              }
              #container {
                   max-width: 480px !important;
                   width: 100% !important;
              }       
          }
          @media screen and (max-width: 320px) {
              body {
                  -webkit-text-size-adjust: none;
              }
              #container {
                   max-width: 320px !important;
                   width: 100% !important;
              }       
          }
      &lt;/style&gt;
        .....
  </code></pre>