Блог

Главная - Вопросы по программированию - медиа-запросы css3: iPad перезаписывает правила iphone4 (retina)

медиа-запросы css3: iPad перезаписывает правила iphone4 (retina)

#css #safari #mobile-safari

#css #safari #мобильный-safari

Вопрос:

Кажется, что правила iPad перезаписывают правила, связанные с iPhone4. Как я могу решить эту проблему?

 /* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    #theDiv { width: 400px; }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    #theDiv { width: 600px; }    
}


/* iPhoneRetina */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    #theDiv { width: 200px; }
}

Комментарии:

1. Вы установили для области просмотра значение width = device-width ?

Ответ №1:

Вы можете увеличить соотношение пикселей дисплея Retina до 2.

Вот ссылка на сообщение в блоге Webkit об этом. Перейдите к заголовку «Условное включение».

Метки: