CODEWITHSUNDEEP
iphonehtmlcssorientationmobile-safari
akashivskyy
akashivskyy

Reputation: 45180

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?

Upvotes: 5

Views: 8388

Answers (3)

tim
tim

Reputation: 3903

I tried commas, didn't work - then tried semicolons, that DID work. iPod touch, iOS 4.2

Upvotes: -1

Dave Lancea
Dave Lancea

Reputation: 1689

The key part to fixing this isn't the meta viewport tag (though that's important, too, but for different reasons). Here's the magic that fixes the text size on orientation change.

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

(I got this from StackExchange's mobile CSS file.)

Upvotes: 10

jtbandes
jtbandes

Reputation: 118681

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" />

Upvotes: 9

Related Questions