У меня есть несколько медиа-запросов, которые игнорируются на устройствах сетчатки - например, iPhone 6 Plus. Минимальная ширина экрана устройства iPhone 6 Plus составляет 414 пикселей. Используя следующий медиа-запрос, я ожидаю, что телефон сделает divClassClass равным 100%. Но divs, использующие этот класс, все еще 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">
Я подумал, что с метатегю viewport выше, это приведет к тому, что ширина устройства (414px) будет использоваться как ширина, поэтому она должна использовать ширину 100% на .customClass.
Похоже, что более высокая плотность пикселей вызывает игнорирование запроса ширины 800 пикселей, но я не уверен, почему.
После многих чтений и исследований я обнаружил, что вы хотите использовать только медиа-запросы сетчатки, если вы используете изображения @ 2x, например, для таргетинга на все экраны сетчатки (а не на макет сайта, например, я делаю выше). Поэтому я бы не подумал, что мне нужны запросы в сетчатке, такие как only screen and (min-device-pixel-ratio: 2), чтобы доставить 100% ширину на iPhone 6 Plus.
Я стараюсь избегать специальных запросов СМИ like this, потому что есть так много устройств, о которых можно беспокоиться, это кажется непрактичным. (Также я попробовал некоторые из них, и они работают с таргетингом на определенные устройства, такие как iPhone 6 Plus, но я больше ищут цель для чего-то под 800px одним махом).
Чтобы быстро подвести итог, если мой примерный код верен, а ответ на вопрос заголовка - это просто «Нет», то есть ли что-то еще, что мне не хватает при таргетинге на устройства сетчатки? Возможно, более значительная проблема? (Я не прошу вас найти эту проблему, если это что-то еще, я буду копать глубже .. но это огромный сайт;))
Спасибо!
Ваш метатег хорошо выглядит, и ваш CSS выглядит хорошо - вам не нужно каким-либо образом модифицировать этот MQ, чтобы заставить его работать на сетчатых телефонах или вашем iPhone 6 Plus. Можете ли вы воспроизвести эту проблему в Инструментах разработчика Chrome при выборе этого телефона на симуляторе мобильных устройств? Я подозреваю, что есть еще одна проблема с CSS, и отладка поможет. –