Правильный запрос СМИ для IPad Pro

У меня эти два, но они не работают. Я имитирую в Chrome

/* Landscape*/

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}

    /* Portrait*/
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

Если я удаляю 'и (ориентация: пейзаж)', то css там работает в первом запросе на медиа. Какова правильная ориентация, как для пейзажа, так и для портрета?

Метатет HTML задается как

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

Ответ 1

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

У меня нет iPad Pro, но это работает для меня в симуляторе Chrome.

Ответ 2

/* Landscape*/

@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

Запрос портретного носителя для iPad Pro должен быть в порядке.

Медиа-запрос альбомной ориентации для iPad Pro (min-device-width) должен быть 1366px и (max-height-device) должен быть 1024px.

Надеюсь это поможет.

Ответ 3

Это сработало для меня

/* Portrait */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-width: 1112px) 
  and (max-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2)
 {

}

Ответ 4

Обратите внимание, что существует несколько iPad Pro, каждый из которых имеет свой видовой экран: при эмуляции iPad Pro с помощью инструментов разработчика Chrome iPad Pro (12,9 ") является вариантом по умолчанию. Если вы хотите эмулировать один из других iPad Pro (10.5) "или 9.7") с другим окном просмотра, вам нужно добавить пользовательское эмулируемое устройство с правильными характеристиками.

Вы можете искать устройства, окна просмотра и соответствующие им медиа-запросы CSS по адресу: http://vizdevices.yesviz.com/devices.php.

Например, iPad Pro (12,9 ") будет иметь следующие медиа-запросы:

/* Landscape */ 
@media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }

В то время как iPad Pro (10,5 ") будет иметь:

/* Landscape */ 
@media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }

Ответ 5

Слишком поздно, но пусть это спасет вас от головной боли! Все это потому, что мы должны определить, что целевой браузер является мобильным!

Это мобильный телефон, а затем объединить его с мин /max- (ширина/высота)

Так что, похоже, это работает:

@media (hover: none) {
    /* ... */
}

Если система первичного механизма ввода устройства не может легко перемещаться над элементами или они могут, но не легко (например, выполняется длительное касание для эмуляции наведения), или нет механизма первичного ввода вообще, мы не используем его ! Есть много случаев, которые вы можете прочитать по ссылкам ниже.

Описано также Также для поддержки браузера См. это из MDN

Ответ 6

Я попробовал несколько из предложенных ответов, но проблема в том, что медиа-запросы конфликтовали с другими запросами, и вместо отображения мобильного CSS на iPad Pro, он отображал CSS на рабочем столе. Поэтому вместо размеров max и min я использовал EXACT VALUES, и это работает, потому что на iPad pro вы не можете изменить размер браузера.

Обратите внимание, что я добавил запрос для мобильного CSS, который я использую для устройств с шириной менее 900 пикселей; не стесняйтесь удалить это при необходимости.

Это запрос, он сочетает в себе как альбомную, так и портретную ориентацию, он работает для 12.9 ", и если вам нужно нацелиться на 10.5", вы можете просто добавить запросы для этих измерений:

@media only screen and (max-width: 900px), 
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape), 
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait)  {

     // insert mobile and iPad Pro 12.9" CSS here    
}

Ответ 7

Для тех, кто хочет использовать iPad Pro 11 ", device-width составляет 834 пикселя, device-height - 1194 device-pixel-ratio - 2. Источник: screen.width, screen.height и devicePixelRatio о которых Safari сообщает в iOS Simulator,

Точный медиа-запрос для портрета: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)