Размер шрифта на мобильных устройствах и настольных компьютерах

Question

Я пытаюсь сделать так, чтобы веб-страница отображала разумный размер шрифта на настольных и мобильных устройствах.

Я тестирую свой Pixel 3, который имеет столько же пикселей, сколько и мой рабочий стол.

Я установил:

font-size: 16px; 

Когда я загружаю страницу в свою ячейку, шрифт становится крошечным. Мой

@media screen and (max-width: 800px)

Не реагирует. Я предполагаю, что это потому, что дисплей Pixel 3 большой.

Я пытался установить:

<meta name="viewport" content="width=device-width">

И затем использовать font-size: 1vh. Это тоже не сработало. Извините за вопрос новичка. В других статьях обычно предлагалось @media, но, насколько я могу судить, в новых ячейках настолько большие экраны, что @media плохо работает с пиксельной математикой.

Итог: что делает простая разумная страница HTML5 / CSS3 похоже, чтобы размер шрифта читался на настольных и мобильных устройствах?

Answer 1

@ media должно работать, если вы делаете это правильно. Однако вы можете сделать следующее:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Измените значения «начальный масштаб = 1,0, максимальный масштаб = 1,0» в соответствии с вашими потребностями. Надеюсь, это поможет.

Или что-то вроде этого:

@media only screen and (max-width: 980px) {
your style
}

@media only screen and (min-width: 981px) {
your style
}