I am NOT talking about zooming the page, but rather the way MobileSafari on iOS automatically bumps up some font sizes sometimes.
When, exactly, is this done? Can it be prevented or discouraged?
Join Stack Overflow to learn, share knowledge, and build your career.
I am NOT talking about zooming the page, but rather the way MobileSafari on iOS automatically bumps up some font sizes sometimes.
When, exactly, is this done? Can it be prevented or discouraged?
body {
-webkit-text-size-adjust: 100%;
}
Just make sure all your text is at a legible size in the first place. The iPhone and iPod touch have a rather small screen, so keep that in mind too.
body
; it should go in an 320px device-width media query if you want it for iPhone.
– mk12
Apr 26 '12 at 0:10
-moz-text-size-adjust
appears to be recognized, but not implemented, by Firefox when I enter it into the developer tools. -ms-text-size-adjust
does definitely exist and is documented here.
– BoltClock♦
Jan 18 '15 at 16:37
Had a lot of trouble tracking it down, but: it’s the -webkit-text-size-adjust
property in CSS.
Read more about it and other iOS-specific CSS here.
Values:
120%
, or 100%
auto
(the default)none
– if auto
isn’t working for your page. However this often causes problems with zooming. Use 100%
instead. For example, open Safari on your desktop and zoom the page (Command-Plus) – your text won’t be enlarged, even though the entire page has zoomed! Don’t use none
!Note that these can be applied not just at the page level but at the element/widget/container level.
(I would not just specify a value of 100%
for my website unless I was damn sure it was already optimized for small screens, and never none
since it causes problems.)
Please note that in Firefox Mobile (e.g. for Android and Firefox OS) there is a similar property, -moz-text-size-adjust
, documented here. Thanks to Costa for pointing this out.
Apparently Microsoft also has a version of this for mobile IE: -ms-text-size-adjust
.
The accepted answer works, but in other webkit browsers it locks in the font-size
for people that are zooming. Using 100%
instead of none works both ways:
body {
-webkit-text-size-adjust: 100%;
}
none
) when you are suggesting 100%
instead?)
– Alan H.
May 10 '12 at 19:01