Question: 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?
Answer: 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; /* Prevent font scaling in landscape */
The use of this property is described further in the Safari Web Content Guide.