Почему мой экран 1080p рендерит сайты с разрешением 640 пикселей?

Question

Google говорит "потому что соотношение пикселей и CSS", но я не могу понять, что это такое и почему оно существует.

Почему я добавляю метаданные, которые говорят браузеру отображать экран с разрешением <2/3 разрешения экрана? Изображения (насколько я могу судить) не меняются, так почему же все остальное? а почему это так распространено?? что происходит?

Answer 1

Вы должны понимать, почему вы добавляете определенные коды в ваш файл. Вы сказали, что у вас есть <meta name="viewport" content="initial-scale=1"> в вашем коде. Какие initial-scale Это означает, что при загрузке страницы страница будет просматриваться с уровнем увеличения 100%. Речь не идет о заполнении 1 CSS-пикселя одним аппаратным пикселем. Речь идет о заполнении 1 CSS-пикселя одним-независимым от устройства пикселем.

Как определено в справочнике разработчика Google:
Устройство-независимый пиксель (провал): масштабирование пикселей устройства, чтобы соответствовать единообразного опорного пикселя на нормальном расстоянии для просмотра, которая должна быть примерно такой же размер на всех устройствах. IPhone 5 имеет ширину 320 провалов.
Аппаратный пиксель: физический пиксель на дисплее. Например, у iPhone 5 есть экран с 640 горизонтальными аппаратными пикселями.

Отличаются ли аппаратные пиксели вашего телефона от пикселей на мониторе ПК? Да, они разные по размеру (плотности пикселей). Предполагая, что ваш 21"монитор и 5" телефонные экраны имеют экраны 1920px x 1080px, поэтому очевидно, что плотность пикселей на экране телефона намного выше (и гораздо меньших пикселей), и было бы неразумно отображать веб-страницу, используя соотношение 1 CSS-пиксель на 1 аппаратный пиксель, поскольку на экране телефона все будет слишком маленьким.

Так что, если вы не хотите адаптивного дизайна веб-сайта, а помещаете всю страницу на маленьком экране, как на мониторе ПК? Все, что вам нужно сделать, это удалить <meta name="viewport" content="width=device-width, initial-scale=1"> По умолчанию линейка и браузеры автоматически размещают страницу на экране путем уменьшения масштаба (т.е. начальный масштаб не будет равен 1). Разработчики добавляют эту строку кода только в том случае, если веб-сайт должен быть отзывчивым, и для этого есть соответствующие медиа-запросы CSS.

Answer 2

Хотя пост Билли действительно ответил на вопрос, и он хорошо описывает общий механизм, встал вопрос, как настроить веб-страницу на полноэкранный режим в браузерах, которые по умолчанию не полностью уменьшают масштаб. То есть используйте каждый пиксель на экране 1920×1080, как если бы это был настольный монитор 1920×1080.

Что ж, к сожалению, нет надежного способа сделать это, но вы можете подойти ближе, если включите некоторые специфичные для устройства запросы @media.

html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
@media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
@media (min-device-pixel-ratio:1.5)         { body {zoom:.66666667} }
@media (min-resolution:1.5dppx)             { body {zoom:.66666667} }
@media (-webkit-min-device-pixel-ratio:2)   { body {zoom:.5} }
@media (min-device-pixel-ratio:2)           { body {zoom:.5} }
@media (min-resolution:2dppx)               { body {zoom:.5} }
@media (-webkit-min-device-pixel-ratio:3)   { body {zoom:.33333333} }
@media (min-device-pixel-ratio:3)           { body {zoom:.33333333} }
@media (min-resolution:3dppx)               { body {zoom:.33333333} }
@media (-webkit-min-device-pixel-ratio:4)   { body {zoom:.25} }
@media (min-device-pixel-ratio:4)           { body {zoom:.25} }
@media (min-resolution:4dppx)               { body {zoom:.25} }

Это (попытка) увеличит масштаб страницы так, чтобы количество пикселей CSS совпадало с количеством аппаратных пикселей.
Конечно, если вы воспользуетесь этим подходом, учтите, что вам придется добавлять новые медиа-запросы с более высоким разрешением с течением времени.
И это не удастся на устройствах, которые не 1920×1080 пикселей.

Лучшим подходом было бы вообще не рассматривать аппаратное разрешение, а просто работать с тем, что у вас есть. Не используйте пиксели, используйте проценты или vw и vh для измерений. 50vw, а не 960px, это горизонтальный центр экрана. Таким образом, ваша веб-страница будет отображаться правильно на любом устройстве, независимо от его характеристик. Нет необходимости в прокрутке или защемлении!
Вы можете обнаружить, что вам необходимо различать альбомный и портретный режимы с помощью запросов @media, но это зависит от содержимого страницы.