title: Webpage on mobile safari is not scaling to fit viewport?
body: <p>I created a simple using only ems and percentages as css units. It is a container div wrapping some elements and it's center in the page with the following code:</p>
  
  <pre><code>position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25.875em;
  margin-left: -38.187em;
  padding: 0;
  width: 76.375em;
  height: 47.75em;
  </code></pre>
  
  <p>It works great in all browsers except for the iphone and ipad. It renders only the top right corner of my page.</p>
  
  <p>I added :</p>
  
  <pre><code>&lt;meta name="viewport" content="maximum-scale=2, minimum-scale=.2, initial-scale=.6"&gt;
  </code></pre>
  
  <p>And it scaled itself down on the ipad but was still to large for the iphone and the page would not scale at all in portrait mode. </p>
  
  <p>Finally by googling and playing around with the meta tag the best solution I could come up with was reducing the meta tag to this:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=yes" &gt;
  </code></pre>
  
  <p>In combination with this :</p>
  
  <pre><code>@media all and ( max-device-width: 780px ) {
    body {
      text-align: center;
    }
    .page-content {
      position: relative;
      top: 0;
      left: 0;
      display: inline-block;
      margin-top: 4%;
      margin-left: 100px;
      margin-right: 120px;
      margin-bottom: 4%;
      text-align: left;
    }
  }
  </code></pre>
  
  <p>The page still renders a very large scale but can be scaled down at least.</p>
  
  <p>Isn't mobile safari supposed to scale the page down automatically? Are the relative units messing me up here?</p>
  
  <p>Any help is appreciated, Thanks!</p>