Медиа-запрос 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 */
}