Методы таргетинга iPad Pro с помощью медиа-запросов CSS

Медиа-запрос CSS для таргетинга на устройства iPad Pro зависит от конкретных размеров области просмотра устройства. У iPad Pro есть разные модели с разными размерами экрана, поэтому вам необходимо учитывать размеры конкретного iPad Pro, на который вы хотите ориентироваться. Вот несколько различных методов, которые вы можете использовать:

Метод 1: таргетинг по ширине и высоте
Вы можете использовать правило @mediaв CSS для таргетинга на определенные размеры экрана. Например, чтобы настроить таргетинг на 12,9-дюймовый iPad Pro, вы можете использовать следующий медиа-запрос:

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (min-device-height: 1366px) 
  and (max-device-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS styles specific to iPad Pro 12.9-inch */
}

Метод 2: таргетинг по разрешению
Вы также можете использовать разрешение устройства для таргетинга на iPad Pro. Вот пример медиа-запроса, нацеленного на 12,9-дюймовый iPad Pro в зависимости от его разрешения:

@media only screen 
  and (min-resolution: 264dpi) 
  and (max-resolution: 273dpi) {
    /* CSS styles specific to iPad Pro 12.9-inch */
}

Метод 3: таргетинг по соотношению сторон устройства.
Если вы хотите настроить таргетинг на iPad Pro на основе его соотношения сторон, вы можете использовать следующий медиа-запрос:

@media only screen 
  and (device-aspect-ratio: 1920/1280) {
    /* CSS styles specific to iPad Pro */
}

Метод 4. Таргетинг по пользовательскому агенту.
Другой подход – выбор iPad Pro на основе строки пользовательского агента. Однако стоит отметить, что строками пользовательского агента можно манипулировать, и они не всегда надежны. Вот пример того, как можно настроить таргетинг на iPad Pro с помощью обнаружения пользовательского агента:

@media only screen 
  and (min-width: 1024px) 
  and (max-width: 1366px) 
  and (min-height: 1366px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (pointer: coarse) {
    /* CSS styles specific to iPad Pro */
}