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?
-
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– Costa Michailidis2013-04-17 22:44:11 +00:00Commented Apr 17, 2013 at 22:44
-
Also, is there a Firefox for Android rule for this?Costa Michailidis– Costa Michailidis2013-04-17 22:46:32 +00:00Commented Apr 17, 2013 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.– Alan H.2013-04-27 04:26:44 +00:00Commented Apr 27, 2013 at 4:26
-
1here ya go: developer.mozilla.org/en-US/docs/CSS/text-size-adjust best info I could find so far.Costa Michailidis– Costa Michailidis2013-04-28 06:53:11 +00:00Commented Apr 28, 2013 at 6: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– Costa Michailidis2013-04-30 05:14:50 +00:00Commented Apr 30, 2013 at 5:14
Add a comment
|
3 Answers
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.
8 Comments
Alan H.
Apple’s documentation: developer.apple.com/library/safari/#documentation/…
mk12
Beware, this prevents text resizing at all in webkit browsers (Safari, Chrome) so zooming will simply scale up images and not text.
mk12
Never place this in
body; it should go in an 320px device-width media query if you want it for iPhone.
C. Dragon 76
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.
|
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%, or100% auto(the default)none– ifautoisn’t working for your page. However this often causes problems with zooming. Use100%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 usenone!
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.
3 Comments
Alan H.
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.)
Rahul
I've struggling to fix the similar issue. This answer helped a lot.
Code Commander
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.
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%;
}
6 Comments
Alan H.
er, why is your code the same as the accepted answer (
none) when you are suggesting 100% instead?)Alan H.
anyway, changed accepted answer to my own & emphasized your point, which I have noticed as well. Thanks for the heads-up, dc-.
BoltClock
@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.
dc-
Doh! Wasn't paying attention. It is fixed!
BoltClock
@Alan H.: It's up to you, really. Personally, I prefer yours.
|