Как вы ориентируетесь на новый 11-дюймовый iPad Pro с медиа-запросом? - PullRequest
Новая
       4

Как вы ориентируетесь на новый 11-дюймовый iPad Pro с медиа-запросом?

0 голосов
/ 08 октября 2019

Я использую 

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

для таргетинга на iPad Pro 12,9 дюйма

и 

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px)
and (-webkit-min-device-pixel-ratio: 2) {}

для таргетинга на все остальные iPad.

В этом случае новый iPad Pro 11-дюймовый использует тот же медиа-запрос «старых» ipads, даже если он имеет более высокое разрешение. Мне нужно нацелить его по-другому.

Если это поможет, у него есть: разрешение 2388 на 1668 пикселей при 264 пикселях на дюйм (ppi)

Спасибо

1 Ответ

0 голосов
/ 08 октября 2019

Следующий CSS работает в симуляторе Chrome, но было бы разумно протестировать его на реальном iPad Pro. 

/* ----------- 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) {

}

Вы также можете изменить значения от 1024px до 2388px и протестировать его.

...