Нужны ли устройствам Retina собственные медиа-запросы?

У меня есть несколько медиазапросов, которые игнорируются на устройствах с сетчаткой — например, 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 пикселей, одним махом.)

Итак, чтобы быстро подвести итог, если мой пример кода верен, а ответ на вопрос заголовка — просто «Нет», то есть ли что-то еще, что я упускаю при нацеливании на устройства с сетчаткой? Возможно, большая проблема на сайте? (Я не прошу вас найти эту проблему, если это что-то другое, я буду копать глубже ... но это огромный сайт;))

Спасибо!


person Kyle    schedule 29.11.2016    source источник
comment
Ваш метатег выглядит хорошо, и ваш CSS выглядит хорошо — вам не нужно каким-либо образом изменять этот MQ, чтобы он работал на телефонах Retina или на вашем iPhone 6 Plus. Можете ли вы воспроизвести эту проблему в инструментах разработчика Chrome при выборе этого телефона в симуляторе мобильного устройства? Я подозреваю, что есть еще одна проблема с CSS, и отладка поможет.   -  person Jon Uleis    schedule 30.11.2016


Ответы (1)


Нет. Нет НЕОБХОДИМОСТИ в медиа-запросах для сетчатки.

В современном мире вы бы использовали векторные или шрифтовые иконки, которые можно масштабировать до бесконечности без потери качества. Что касается фотографий, то было бы бессмысленно добавлять разные для дисплеев Retina.

Ваш код выше правильный. Имейте в виду, что отображаемое разрешение — это фактическое разрешение/плотность пикселей устройства. Это означает, что размер iphone 750x1334px с плотностью пикселей 2 (@2x), поэтому фактическое отображаемое разрешение составляет 375x667px.

person scooterlord    schedule 29.11.2016