Webpage on mobile safari is not scaling to fit viewport?

问题

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:

position: absolute;
top: 50%;
left: 50%;
margin-top: -25.875em;
margin-left: -38.187em;
padding: 0;
width: 76.375em;
height: 47.75em;

It works great in all browsers except for the iphone and ipad. It renders only the top right corner of my page.

I added :

<meta name="viewport" content="maximum-scale=2, minimum-scale=.2, initial-scale=.6">

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.

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:

<meta name="viewport" content="user-scalable=yes" >

In combination with this :

@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;
  }
}

The page still renders a very large scale but can be scaled down at least.

Isn't mobile safari supposed to scale the page down automatically? Are the relative units messing me up here?

Any help is appreciated, Thanks!