Медиа-запрос: смартфон-пейзаж выполняется для iPad - PullRequest
Новая
       5

Медиа-запрос: смартфон-пейзаж выполняется для iPad

0 голосов
/ 02 декабря 2011

У меня есть css медиа-запросы, подобные этому 

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" />

<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

Проблема в том, что файл smartphone-landscape.css также выполняется для iPad. Как я могу предотвратить это? так что смартфон-пейзаж работает только в режиме iPhone Landspe (и для устройств с аналогичным разрешением), но не для iPad.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2012

Вам придется повторно применить таблицу стилей в ipad-landscape.css, так как smartphone.css over записывает ее.

0 голосов
/ 06 декабря 2011

Ссылаясь на статью Криса Койера, здесь приведен специальный код CSS, предназначенный только для ipad и смартфонов с медиазапросами.

Для полной статьи: http://css -tricks.com / snippets / css / media-query-for-standard-devices /

Обратите внимание на конкретную ссылку «устройство» для запроса только ipad: 

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

Итак, в вашем случае: 

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
...