5

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?

4
  • I don't have an iphone myself, but is this normal behaviour for the phone? Would a user be expecting the content to be scaled upon switching the orientation?
    – Jared
    Aug 18, 2011 at 18:53
  • 1
    Maybe, but I don't want my content to be scaled, because my images get pixelated. PS: There are some sites that don't scale their content, e.g. StackOverflow: cl.ly/0o0t2N2225063T2N2E05 Aug 18, 2011 at 19:00
  • If pixelated images is the issue, you could consider using svg instead.
    – Ludder
    Oct 24, 2012 at 10:57
  • 1
    It is not the matter of pixelating. Oct 24, 2012 at 12:58

3 Answers 3

10

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.)

2
  • 2
    I think this is the best answer. Disabling user scaling is not very user friendly. For more info see 456bereastreet.com/archive/201012/…
    – user159987
    Nov 28, 2011 at 22:57
  • This doesn't work if a text input is focused while onorientationchange fires. See a demo here. Jul 13, 2015 at 11:21
9

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" />
1
  • MDN says use commas, Apple says semicolons. Seems like both can use semicolons, though. Sep 1, 2011 at 19:46
-1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.