<meta name="viewport" content="width=device-width, initial-scale=1">
Добавьте указанный выше код в тег <head>
.
Я скопировал этот код с веб-сайта GitHub
Почему это работает?
Большинство мобильных экранов имеют разрешение примерно Full HD. Это то же самое, что и у большинства компьютерных мониторов и экранов ноутбуков.
16 пикселей в качестве размера шрифта по умолчанию для абзаца. На мобильном экране он будет слишком маленьким.
Поэтому мобильные браузеры конвертируют размер отображаемого экрана. Например, iPhone X преобразует размер экрана в 375 пикселей на 812 пикселей, в то время как фактическое разрешение составляет 1125 x 2436 пикселей.
width=device-width
устанавливает ширину HTML в ширину, предлагаемую браузером (375 пикселей для iPhone X).
Обычно вы задаете коэффициент масштабирования равным 1. Вы можете установить коэффициент масштабирования самостоятельно, указав initial-scale=0.8
, и посмотреть, хотите ли вы.