Question

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.

Answer 1

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