Как различить Android и iPad с помощью медиазапроса?

Question

На странице, которую я создаю, я пишу дополнительную таблицу стилей для мобильных устройств, которая перезаписывает выбранные части первой таблицы стилей.

Я использую медиазапросы следующим образом:

<link rel="stylesheet" href="assets/ui.css">
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="assets/ui_mobile.css" type="text/css">

Это работает для iPhone.Моя цель - создать запрос, который будет активирован, если это iPhone или Android, и затем позволить iPad использовать стандартный стиль рабочего стола.

Когда я переключаю его на max-device-width: 800px, он срабатываетiPhone и Android, но также запускается на iPad.Не следует этого делать, так как максимальная ширина устройства iPad составляет 780 пикселей.Но это так или иначе.

Я использовал много перестановок различной ширины, высоты и пропорций, но безрезультатно.Кто-нибудь знает реальный способ различения этих трех?

Любые предложения приветствуются.Спасибо!

Answer 1

Когда я переключаю его на max-device-width: 800px, он срабатывает на iPhone и Android, но также на iPad.Не следует этого делать, так как максимальная ширина устройства iPad составляет 780 пикселей.Но по какой-то причине.

Я думаю, вы не понимаете, как работает max-device-width.Поскольку max-device-width в iPad составляет 780 пикселей, он падает ниже предела в 800 пикселей так же, как и iPhone.

Answer 2

Попробуйте использовать физические измерения, а не пиксели - вы пытаетесь ограничиться небольшими экранами, независимо от разрешения. Попробуйте

max-device-width:12cm

Который будет соответствовать только физически маленьким экранам, таким как телефон (независимо от его высокого разрешения), но не большим экранам, таким как планшеты, независимо от того, как изменится разрешение в будущем.