9

I was wondering whether it is possible to prevent following behaviour: I've got a *.css file in which I define the font-size for my mobile-web-app.

html,body { font-size:16px !important; }

I didn't use any other font-size attributes in my files. Now, when I turn into the landscape mode, the font-size changes. How can I prevent or manipulate this behaviour. Do I have to use @media screen and (max-width: x px) { } or is there any other way?

Thanks for sharing.

glup
  • 141
  • 1
  • 5

1 Answers1

16

You may need to use extra selectors but the following should do the trick.

html,body { -webkit-text-size-adjust:none; }

So that this rule doesn't prevent text resizing in WebKit desktop browsers (Chrome, Safari and soon Opera), wrap it in a CSS media query targeting the desired devices like so:

/* iPhone, portrait & landscape. */
@media all and (max-device-width: 480px) {
    html,body { -webkit-text-size-adjust:none; }
}
/* iPad, portrait & landscape. */
@media all and (min-device-width: 768px) and (max-device-width: 1024px) {
    html,body { -webkit-text-size-adjust:none; }
}
Marcel
  • 27,922
  • 9
  • 70
  • 85
  • 3
    A warning: This css rule affects all webkit browsers, including desktop ones, and prevents desktop users from changing their font-size using browser zoom. As such, I don't recommend you use it without a media query to target just mobiles. – Steve Sep 13 '12 at 10:02
  • @Steve any alternatives to achieve iOS-only results? – Dan Apr 18 '13 at 15:33
  • @Dan I've added Steve's input to my answer. – Marcel Apr 18 '13 at 20:26