CSS @media запросы для дисплеев с высоким разрешением не работают

Я настроил немного CSS, чтобы определить, использует ли клиент Retina или другой дисплей HiDPI, и на основе этого отобразить разные background-image для разных div. Вот мой синтаксис:

<!-- LoDPI and MedDPI displays -->
#div {
    opacity:0.4;
    position:absolute;
    top:0px;
    z-index:2;
    width:1600px;
    height:900px;
    animation-name:ring;
    animation-delay:0s;
    animation-duration:1500ms;
    animation-timing-function:cubic-bezier(0.225, 1.650, 0.000, 0.805);
    animation-fill-mode:forwards;
    background-image:url(/valid/path/to/regular/file);
}

<!-- For Retina and HiDPI displays -->
@media only screen and (min-device-pixel-ratio: 1.4) {
#div {
    background-image:url(/valid/link/to/HiDPI/file);
    background-position:center;
    background-size:contain;
    }
}

Проблема в том, что когда я пробую это на моем Retina MBP, у которого соотношение пикселей установлено на 1,5 ("действует как 1920x1200)", отображаются изображения с нормальным разрешением, а не с высоким разрешением.


css media media-queries retina-display
person Jules    schedule 29.09.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

У вас не закрыты все фигурные скобки. Тем не менее, для лучшей матрицы поддержки замените свой медиа-запрос на

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
         /*your rules*/
       }
person Oleg    schedule 29.09.2012
comment
На самом деле, я должен упомянуть, что у меня включен Prefix Free JS, и что я пропустил закрывающую скобку @media в моем первоначальном вопросе. - person Jules; 29.09.2012
comment
Я не мог быть уверен, опечатка это или нет. Вы также используете комментарии CSS вместо HTML? Однако я не знаком с тем, насколько хорошо различные обходные пути JS, подобные Prefix Free, работают с медиа-запросами. - person Oleg; 29.09.2012
comment
Пока они работают достаточно хорошо; все остальные медиа-запросы на моем сайте работают нормально (большинство из них предназначены для разрешений) и используют тот же синтаксис. - person Jules; 29.09.2012
comment
На самом деле, знаете ли вы, включает ли спецификация W3C max-device-pixel-ratio в дополнение к min-device-pixel-ratio? - person Jules; 29.09.2012
comment
Это минимальное - соотношение пикселей устройства и устройства. developer.mozilla.org/en-US / docs / CSS / - person RobW; 12.01.2013

arrow_upward
1
arrow_downward

У меня была та же проблема: min-device-pixel-ratio, похоже, не поддерживается (с префиксом) js без префиксов !? min-device-pixel-ratio несовместимо с W3C.

Когда я использую его с префиксами производителей, все работает нормально ?!

это отлично работает для меня (удалите комментарии)

@media (-webkit-min-device-pixel-ratio: 2), /*  Firefox16, Chrome, Safari, iOS, Android */
       (min--moz-device-pixel-ratio: 2),    /*  Older Firefox browsers (prior to Firefox16) */
       (-o-min-device-pixel-ratio: 2/1),    /*  Opera */
       (min-device-pixel-ratio: 2),         /*  not defined yet, http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 2dppx),             /*  not yet, probably in future, see http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 192dpi)             /*  works for non css3 browser */
       {
            /* your styles go here */
       }
  • значения Opera должны быть 1/1, 3/2, 2/1, эквивалентными 1, 1.5 и 2.
  • Значения dpi должны быть 96, 144, 192, эквивалентными 1, 1,5 и 2.

при использовании -webkit-text-size-adjust: none; font-sizes не взорвется на iPhone при переключении из портретного в альбомный режим ;-)

person dexter    schedule 05.10.2012