Медиа-запрос для iPad с минимальной шириной также распространяется на устройства Android

Question

Я редактирую чужие CSS. Они использовали два медиазапроса для iPad (один для портрета, другой для ландшафта), которые, кажется, вызывают проблемы на некоторых более крупных телефонах Android и фаблетах.

То, что я нахожу настолько странным, - то, что используемый ими CSS рекомендуется практически всеми, хотя он очень уязвим на устройствах Android.

Этот запрос делает следующее: он использует комбинацию min-device-width и max-device-width, чтобы убедиться, что это устройство iPad. Он использует параметр ориентации, чтобы выяснить, является ли устройство портретным или альбомным (на устройствах с iOS ширина устройства всегда равна ширине в портретном режиме, даже если устройство в настоящее время находится в альбомной ориентации).

Это CSS, который, кажется, вызывает проблему:

/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}

/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}

Теперь проблема в том, что определение минимальной и максимальной ширины устройства оставляет много места для применения этих стилей и к другим устройствам. Все, что имеет ширину от 768 до 1024 пикселей, рассматривается как iPad.

В моем случае стиль определяет, что ширина пользовательской панели кнопок в нижней части экрана составляет ровно 768 пикселей. И еще кое-что подобное. Это работает на iPad, но не на устройствах с одинаковой, но разной шириной. Кнопки падают с экрана на задействованных устройствах Android.

Итак, что я использую сейчас:

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { etc }
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { etc }

Это похоже на все iPad. Я понял, что все iPad имеют "ширину устройства" 768 пикселей, даже если их разрешение выше.

Так что я уверен, что все делаю правильно. Но так как это довольно распространенная проблема, и все остальные говорят об использовании MIN-device-width и MIN-device-height, я все равно буду очень рад услышать об этом кого-то еще.

Answer 1

Медиа-запросы - это правильный способ нацеливания на устройство в зависимости от разрешения экрана.

Этот ответ на другой почти идентичный вопрос объясняет это лучше всего.

/questions/8101338/css-media-zapros-tolko-dlya-ipad-i-ipad/8101358#8101358