Медиа-запрос для таргетинга на iPad

Question

У меня проблема с записью определенных c запросов для iPad Pro и iPad, которые отображаются в инструментах разработчика Google Chrome ... Я не могу настроить таргетинг на iPad Pro, например

"и (min-device- width: 768px) и (max-device-width: 1024px) "

Но это также работает для других разрешений, таких как

" и (min-device-width: 1024px) и ( max-device-width: 1366px) "

У кого-нибудь есть ответ на вопрос, как написать разные правила медиазапроса для iPad разных размеров? Большое спасибо:)

Answer 1

iPad может использовать запрос -webkit-min-device-pixel-ratio, чтобы проверить, является ли экран сетчаткой или нет. Старые iPad имеют значение -webkit-min-device-pixel-ratio 1. iPad 3 и выше имеют значение 2, в то время как оба имеют одинаковые размеры экрана.

/* iPad 1, 2, Mini and Air */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 3, 4 and Pro 9.7" */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

CSSTricks имеет отличный пост на этом для распознавания всех видов устройств.