Search code examples
iphonehtmlcssorientationmobile-safari

How can I disable MobileSafari's content scaling on orientation change?

I'm making a mobile version of my application support site and I have a little WebKit/iOS/HTML/CSS problem here...

I have a page, index.php, with mobile.css file attached. In my <head> tag I have:

<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />

My body's css:

body {
    font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif;
    margin: 0;
    background: url(../../images/textured_bg.png) repeat;
    color:#454545;
    font-size: 14px;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px;
    width:100%;
}

Everything works fine in portrait orientation, but when I rotate my iPhone to landscape, Safari scales my content so it looks like in portrait, but a little bigger:

enter image description here

My question: Is there a way, without making custom css for each orientation, to force Safari not to scale my content?

Solution

  • You will probably want to use the <meta name="viewport" .../> tag (see MDN docs and Safari Web Content Guide). The mobile Stack Exchange layout uses this:

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />