All geek questions in one place

Font size in portrait and landscape on mobile devices

I am developing a mobile website, but ran into this problem - the 14px font size is displayed much larger in the landscape than in the portrait. However, it seems that this is based on the fact that the Div size is set to 100%, so in the landscape it is obviously wider. I do not understand why this should affect the font size, provided that 14px is not a relative size, but a fixed one?

Is there any explanation for this that I am missing? Appreciate any answers (until you tell me that I'm an idiot to skip something obvious!)

+4
source share
2 answers

Apple zooms in on the viewport to improve readability. It doesn't matter that the font size is set as something absolute, like 14px. To disable it, you can use the following CSS:

-webkit-text-size-adjust: none;
+9
source

@ hotshot309 comment (link to this post from 55 minutes ) is the correct answer, but I'm afraid that the comment does not get the attention it deserves. What the OP should use (and probably someone who comes here) is:

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

If you set it to none , the user will not be able to scale even if he wants to (something that I, for example, often do on the desktop when I don’t want to violate the personal space of the monitor with my face). Using 100% prevents webkit from performing default scaling, thereby allowing users to do it themselves.

+3
source

Source: https://habr.com/ru/post/1402122/

More articles:


All Articles