Могу ли я использовать максимальную ширину устройства и ширину устройства без отношения пикселов устройства?

У меня есть мобильный сайт, который тестируется на любом современном устройстве. Мой метафайл тега просмотра:

Вопрос: Могу ли я ретранслировать значение видового экрана (особенно в width=device-width) и записывать медиа-запросы без значений device-pixel-ratio.

Пример кода: У меня есть блок, который имеет разный макет, а ширина экрана меньше 400px. Можно ли использовать с таким окном просмотра media query следующим образом (1):

@media all and (max-width: 399px) {
 /* some css code */
}

Или как это (2):

@media all and (max-device-width: 399px) {
 /* some css code */
}

Или я должен объединить 1 или 2 с большой частью значений device-pixel-ratio (3) для каждого мультимедийного запроса:

only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 399px),
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 399px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 399px),
only screen and ( min-device-pixel-ratio: 2) and (max-width: 399px),
only screen and ( min-resolution: 192dpi) and (max-width: 399px),
only screen and ( min-resolution: 2dppx) and (max-width: 399px) { 
 /*some css code*/
}

И второй вопрос: По моему мнению, строка width=device-width должна предотвращать разницу между пикселями css и пикселями устройства. Последнее неверное утверждение?

1 ответ

Краткие ответы:

  • Вы можете просто использовать запросы max-width или max-device-width. Вы позаботились об остальном с помощью метатега.
  • Ваш второй вопрос не совсем прав: на самом деле это не относится к пикселям устройства. width=device-width просто сообщает устройству использовать его значение по умолчанию для виртуального пикселя (CSS-пиксель).
  • Еще одно замечание: последний пример со сложным медиа-запросом предназначен только для устройств с высоким разрешением, что, вероятно, не так, как вы хотите в этом примере.

Объяснение:

Я буду ссылаться на пиксели CSS как виртуальные пиксели, но я думаю, что мы говорим об одном и том же.

Измерение виртуальных пикселей - это номер, который браузер говорит о его ширине пикселя. Он напрямую связан с пикселями CSS, но может отличаться от пикселов устройства. Например, если у меня есть более старый iPhone со стандартным разрешением, его ширина виртуального пикселя равна 320. (Это занимает 320 пикселов CSS.) На дисплее также есть 320 фактических пикселей по ширине или 320 пикселей устройства, поэтому device-pixel-ratio (отношение виртуальных пикселей к пикселям устройства) равно 1.

Если я перейду на новый iPhone с дисплеем с высоким разрешением, он все еще регистрирует 320 виртуальных пикселей, но теперь он имеет device-pixel-ratio из 2 или 640 фактических пикселей по ширине. Вот почему все выглядит так ясно - в одном пространстве больше пикселей.

Если я просматриваю сайт на одном из этих устройств, ширина выглядит одинаково, поскольку они имеют одинаковое измерение виртуальных пикселей. Для моего CSS они имеют ширину 320 пикселей. Это довольно просто, пока некоторые мобильные браузеры не позволят нам зажать и увеличить масштаб, чтобы изменить размер веб-страницы. Это изменение размера изменяет ширину виртуального пикселя.

Некоторые мобильные браузеры фактически автоматически изменяют размер. Поэтому, если бы я посетил сайт в моем браузере телефона с фиксированной шириной 1000 пикселей, мой браузер телефона мог бы поместиться в полную ширину сайта в окне просмотра, что сделало бы мои виртуальные пиксели выше 1000 вместо 320 Я бы просмотрел очень маленькую версию сайта. Это проблема для чувствительных сайтов, потому что, если мой телефон говорит, что он получил 1000 виртуальных пикселей, он активирует мой мультимедийный запрос 1000px, а не правильный запрос 320px.

width=device-width и initial-scale=1 отключите это автоматическое изменение размера, поэтому вы знаете, что если виртуальная ширина браузера равна 320, это то, что вы получите при начальной загрузке.

minimum-scale=1, maximum-scale=1, user-scalable=no отключить возможность пользователя щепотку и масштабирование вручную. Это может раздражать некоторых пользователей, но это дает вам немного больше контроля над окончательным просмотром.

device-pixel-ratio используется для измерения разрешения устройства. Он часто используется для обработки изображений с высоким разрешением для устройств с высоким разрешением, поскольку изображения с нормальным разрешением могут выглядеть размытыми на устройстве с высоким разрешением. Обычно люди проверяют, находится ли device-pixel-ratio на уровне или выше 1,5 или 2, чтобы определить устройство с высоким разрешением.

licensed under cc by-sa 3.0 with attribution.