Обнаружение мобильных устройств против планшета и рабочего стола Javascript

Question

Я столкнулся с некоторыми проблемами, определяющими тип браузера с помощью Javascript. Мой текущий метод заключается в том, чтобы фиксировать ширину и высоту экрана и определять тип браузера на основе размеров пикселей.

Я предположил, что могу предположить, что любая ширина экрана под 768 будет мобильной, всего под 1024 таблеткой и чем-нибудь выше этого рабочего стола.

Я начал тестирование на нескольких устройствах, на которых я действительно могу получить свои руки, и результаты сильно отличаются. Например, на андроиде (Droid Bionic, если быть точным, хотя это не имеет большого значения), он возвращает ширину 980 независимо от того, находится ли устройство в ландшафтном или портретном режиме. Это намного выше, чем я предполагал.

В настоящее время я использую document.documentElement.clientWidth для определения ширины, но я пробовал другие подходы, такие как window.innerWidth.

Я думаю, что я пытаюсь понять, это вопрос, который был задан много раз, и я думал, что у меня есть довольно четкий ответ. По-видимому, настало время для обновления при правильном обнаружении браузера/устройства. Итак, каков наиболее эффективный способ определения фактического размера устройства, на котором я работаю?

UPDATE: Кажется, что мобильные браузеры фактически берут на себя решение решить, как отображать мое приложение. И на самом деле они есть, но есть способ остановить это. См. Ответ. К счастью, это означает, что стандартные методы обнаружения объектов, к которым мы привыкли, по-прежнему являются наилучшим способом определения используемого устройства. Комментарий

Answer 1

Per Дагг Nabbit по вопросу:

кажется, что мобильные браузеры берут на себя, чтобы определить способ отображения сайта. Обычно это означает, что вы используете настольную версию веб-сайта и масштабируетесь, чтобы соответствовать содержимому на экране. Для 90% интернета это необходимо, иначе опыт просмотра мобильных телефонов будет ужасающим. Для чувствительных веб-сайтов это не хорошо, потому что в большинстве случаев у нас есть очень специфические элементы, которые должны быть изменены в зависимости от разрешения устройства, на котором просматривается сайт. Итак, как мы можем остановить браузеры?

Использование метатега viewport. Стандартный тег выглядит примерно так:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

Но есть много разных способов настроить это в соответствии с вашими потребностями. Хорошая ссылка https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag