55

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?

donohoe
  • 13,867
  • 4
  • 37
  • 59
Alan H.
  • 16,219
  • 17
  • 80
  • 113
  • Hmm... I'm having this problem too, but I'm wondering, is there a good way to work with text resizing? I'm annoying because it's causing overflow on my buttons, and cutting off text in my input fields. Seems like it's doing more harm that good, but maybe I'm doing something wrong. Anyone find any success in working with it, as opposed to disabling it? – Costa Michailidis Apr 17 '13 at 22:44
  • Also, is there a Firefox for Android rule for this? – Costa Michailidis Apr 17 '13 at 22:46
  • 1
    @Costa I don’t know. Two questions: (1) Is there a Mobile Firefox simulator? (2) Does MDN have any helpful comments? Not a question: (3) I’d love to know, so be sure to leave a comment here when you figure it out! Thanks! – Alan H. Apr 27 '13 at 04:26
  • 1
    here ya go: https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust best info I could find so far. – Costa Michailidis Apr 28 '13 at 06:53
  • I set my viewport down to 600px and the resizing stopped. I think there's some calculation of "visibility" going on. Anyways, I'm slowly working toward a totally fluid layout. I don't think there's a Firefox for Android sim. There's plenty of interesting things on MDN, in fact I think every browser has a prefixed text-resize or text-adjust css rule of sorts. – Costa Michailidis Apr 30 '13 at 05:14

3 Answers3

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Hey thanks a million. I had almost finished writing my own answer as you posted yours. Appreciate it. (I had almost given up looking when I posted the question) – Alan H. Jun 02 '11 at 05:33
  • 3
    Apple’s documentation: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-text-size-adjust – Alan H. Jul 16 '11 at 00:57
  • 2
    Beware, this prevents text resizing at all in webkit browsers (Safari, Chrome) so zooming will simply scale up images and not text. – mk12 Apr 25 '12 at 23:38
  • 5
    Never place this in `body`; it should go in an 320px device-width media query if you want it for iPhone. – mk12 Apr 26 '12 at 00:10
  • 1
    Also consider adding -moz-text-size-adjust and -ms-text-size-adjust (as well as simply text-size-adjust) alongside -webkit-text-size-adjust to achieve the same effect on a wider range of phones and other devices. – C. Dragon 76 Jul 24 '13 at 00:40
  • I don't think there is a `-moz-text-size-adjust` nor a `-ms-text-size-adjust`, at least according to Can I Use. Have I missed something? – Bob Rockefeller Jan 18 '15 at 16:34
  • 1
    @Bob Rockefeller: `-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](http://msdn.microsoft.com/en-us/library/ie/dn793579.aspx). – BoltClock Jan 18 '15 at 16:37
  • @BobRockefeller On Firefox Mobile (Fennec) I used `-moz-text-size-adjust: none;` to disable font inflation. It is documented in [this MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust). Mozilla calls it "font inflation" whereas iOS calls it "font boosting". Microsoft [says](http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082.aspx#BKMK_AdjustingTextSizewithCustomCSS) "-ms-text-size-adjust property is ignored where the viewport tag is present" and [this](https://output.jsbin.com/hacaga/quiet) showed me that Windows Phone and Edge support it. – robocat Feb 19 '16 at 00:46
33

Had a lot of trouble tracking it down, but: it’s the -webkit-text-size-adjust property in CSS.

Values:

  • Percentage (of default size), e.g. 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.

Update, 10 years later: This MDN page is probably best for checking what browsers' current compatibilities and vendor prefixes are for this property.

Alan H.
  • 16,219
  • 17
  • 80
  • 113
  • 23
    I never ask a question *intending* to answer it myself, but do accept my own answer *if and only if* I consider it the best one, to indicate as much to viewers. If you don’t like that, then you can get bent. (In this case, I searched for fifteen minutes, found nothing, asked this question, then immediately found the correct documentation. Who cares? The net effect is I’m making good info more findable.) – Alan H. Jun 03 '11 at 02:08
  • I've struggling to fix the similar issue. This answer helped a lot. – Rahul Jan 19 '17 at 08:17
  • I was having some oddities with using CSS "zoom" that only occurred on Safari iOS 11 (not on Safari for desktop). Setting this property to "auto" fixed it. It is almost like Safari on iOS changes this property when zoom is applied to the element. – Code Commander Nov 05 '17 at 02:24
15

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%;
}
simhumileco
  • 31,877
  • 16
  • 137
  • 115
dc-
  • 1,878
  • 1
  • 15
  • 15
  • er, why is your code the same as the accepted answer (`none`) when you are suggesting `100%` instead?) – Alan H. May 10 '12 at 19:01
  • anyway, changed accepted answer to my own & emphasized your point, which I have noticed as well. Thanks for the heads-up, dc-. – Alan H. May 10 '12 at 19:11
  • 1
    @Alan H.: Bah, I edited my answer. Accepted self-answers don't rise to the top automatically, and I would rather not have a highly-voted but misleading answer. – BoltClock May 10 '12 at 19:46
  • Doh! Wasn't paying attention. It is fixed! – dc- May 10 '12 at 20:05
  • @BoltClock In your opinion, given your update, the additional info in my comment, and the fact I did end up self-answering — whose answer should be accepted? – Alan H. May 10 '12 at 20:21
  • 1
    @Alan H.: It's up to you, really. Personally, I prefer yours. – BoltClock May 10 '12 at 20:24