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

Question

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

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> 

Вопрос: Могу ли я передать на значение видового экрана (особенно на 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 */ 
} 

Или я должен сочетать в себе или с большой частью 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 и пикселями устройства. Последнее утверждение неверно?

Answer 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, чтобы определить устройство с высоким разрешением.