У меня есть несколько медиазапросов, которые игнорируются на устройствах с сетчаткой — например, iPhone 6 Plus. Минимальная ширина экрана iPhone 6 Plus составляет 414 пикселей. Используя следующий медиа-запрос, я ожидаю, что телефон сделает div customClass шириной 100%. Но div, использующих этот класс, по-прежнему 33,33333%. (Я упростил приведенный ниже код для примера, удалив поплавки и т. д.)
Например, у меня есть следующий CSS:
.customClass {
width: 33.33333%;
}
@media screen and (max-width: 800px) {
.customClass {
width: 100%;
}
}
У меня в шапке, кстати:
<meta name="viewport" content="width=device-width, initial-scale=1">
Я думал, что с метатегом области просмотра выше это приведет к тому, что ширина устройства (414 пикселей) будет использоваться в качестве ширины, поэтому она должна использовать ширину 100% в .customClass.
Кажется, что более высокая плотность пикселей заставляет его игнорировать запрос ширины 800 пикселей, но я не уверен, почему.
После большого количества чтения и исследований я обнаружил, что вы хотите использовать медиа-запросы retina только в том случае, если вы используете изображения @2x, например, для таргетинга на все экраны Retina (а не для макета сайта, как я делаю выше ). Поэтому я бы не подумал, что мне понадобятся медиа-запросы retina, такие как only screen and (min-device-pixel-ratio: 2)
, чтобы обеспечить 100% ширину для iPhone 6 Plus.
Я пытаюсь избежать медиа-запросов для конкретных устройств, подобных этому поскольку существует так много устройств, о которых нужно беспокоиться, это кажется нецелесообразным. (Кроме того, я попробовал некоторые из них, и они действительно работают с определенными устройствами, такими как iPhone 6 Plus, но я больше хочу настроить таргетинг на все, что меньше 800 пикселей, одним махом.)
Итак, чтобы быстро подвести итог, если мой пример кода верен, а ответ на вопрос заголовка — просто «Нет», то есть ли что-то еще, что я упускаю при нацеливании на устройства с сетчаткой? Возможно, большая проблема на сайте? (Я не прошу вас найти эту проблему, если это что-то другое, я буду копать глубже ... но это огромный сайт;))
Спасибо!