Как обнаружить смартфон через JavaScript/CSS?

Question

Я видел в Интернете, что лучший способ сделать адаптивный дизайн - это использовать CSS @media запросы. Это не кажется практичным решением, так как многие телефоны screen и имеют столько же пикселей, сколько настольные мониторы (т. е. iPhone 6 Plus имеет разрешение 1080x1920, а некоторые телефоны Android имеют даже большие размеры). Так что, если я сказал min-width: 800px; для моего дизайна рабочего стола многие смартфоны будут использовать эти правила.

Один обходной путь должен использовать navigator.userAgent в JavaScript для обнаружения мобильных устройств, но я также слышал, что это не является широко совместимым.

Есть ли "лучший" способ определить, находится ли пользователь на мобильном устройстве (желательно с JavaScript или CSS)?

Answer 1

Если вы добавите этот код на свою страницу headширина области просмотра не будет фактическим количеством пикселей, а вместо этого будет сопоставима с плотностью пикселей 96 точек на дюйм:

<meta name="viewport" content="width=device-width"/>

Это приводит к ширине CSS 320 пикселей на большинстве смартфонов, хотя их фактическое разрешение выше.