Font size in portrait vs. landscape on mobile devices

4
votes

I am developing a mobile website but have encountered this problem - a font size of 14px is displaying much larger in landscape than in portrait. However, it seems to be based on the fact that the Div size is set to 100% so in landscape it is obviously wider. What I don't understand is why that should affect the size of the font given that 14px isn't a relative size but a fixed one?

Is there an explanation for this that I am missing? Appreciate any answers (so long as you don't tell me I'm an idiot for missing something obvious!)

2
htmlcssmobile
On what device in what browser? – Pekka
It's on an iphone using Safari mobile. – Andy

2 Answers

9
votes

Apple rescales the font-size when the viewport changes to increase readability. It doesn't matter that the font-size is set to something absolute like 14px. To disable it, you can use the following CSS:

-webkit-text-size-adjust: none;
3
votes

@hotshot309's comment (linking to this post from 55 Minutes) is the correct answer, but I fear as a comment it isn't getting the attention it deserves. What the OP (and likely anybody arriving here) should be using is this:

-webkit-text-size-adjust: 100%;

If you set it to none, the user won't be able to scale even if they want to (something that I, for one, often do on desktop when I don't feel like violating the monitor's personal space with my face). Using 100% prevents webkit from doing its default scaling while still allowing users the freedom to do so themselves.