Насколько надежно обнаружение мобильных устройств по разрешению экрана?

Question

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

Если у меня есть только одна версия мобильного сайта (нет вариантов для разные устройства, только один сайт для всех мобильных телефонов), насколько это надежно определить мобильные устройства по разрешению экрана?

И просто обслуживайте мобильную версию, если разрешение экрана меньше, чем, скажем, 400 пикселей.

ПРИМЕЧАНИЕ. В моем вопросе предполагается, что JavaScript включен. Кроме того, я знаю, что есть обнаружение агента пользователя, но я бы хотел обойтись без него.

Answer 1

Обнаружение экрана мобильного устройства Javascript по высоте не совсем надежно.Проблема в том, что разные браузеры используют разное количество «хрома», а разные версии ОС используют разную высоту для системной панели.Все механизмы обнаружения сообщают ненадежные данные о высоте (screen.height, window.outerHeight, window.innerHeight и т. Д. И т. Д.)

Ширина представляется наиболее надежной для window.outerWidth во всех ОС.* Прочитайте самый превосходный аналитический отчет здесь:

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

Answer 2

Возможно, вы захотите просмотреть различные таблицы стилей с помощью медиа-запросов.Вы можете использовать запросы для определения ширины экрана и обслуживать только определенные CSS для определенных устройств.Например, этот запрос будет обслуживать iphone.css только для устройств, которые имеют типичные размеры iphone:

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

Подробная статья на эту тему размещена на alistapart * 1006.*

Имейте в виду, что не все устройства распознают медиазапросы.Если вам нужно поддерживать множество старых устройств, таких как BlackBerry и Flip-телефоны, вы должны воспользоваться приведенным выше советом по использованию обнаружения UA - я знаю, что это неправильно, если вы выходите из мира разработки настольных систем, но на самом деле мы должны использовать инструменты, которые у нас естьдоступно для нас, и мобильная сеть растет, но во многих отношениях все еще открывает новые горизонты.

Answer 3

Я пришел сюда, потому что у меня была та же идея и вопрос, и похожая ситуация - веб-сайт уже требует JavaScript, и я делаю мобильное веб-приложение одного размера, по крайней мере, на данный момент.Наш цикл выпуска очень длинный - к моменту тестирования и выпуска кода любое обнаружение UA-кода, которое я использую, будет несколько устаревшим.Поскольку цель этого альтернативного интерфейса - заставить его работать на экранах меньшего размера, представляется целесообразным использовать этот тест.Однако я не знаю, какой размер я бы выбрал - у меня предчувствие, что мобильные устройства не привязаны (даже условно) к определенным размерам экрана.Я думаю, нам просто нужно решить, в какой момент главная веб-страница больше не функционирует.

Я могу понять нерешительность других людей к этому подходу, потому что иногда возникают другие проблемы со стандартным сайтом на мобильном устройстве, чем простоРазмер экрана.Тем не менее, я думаю, что у такого рода обнаружения есть преимущество.Если ваша единственная проблема - размер экрана, я думаю, это хороший способ.

Answer 4

Это зависит от того, чего вы хотите достичь.

Если вы проектируете для разных разрешений экрана независимо от типа устройства , тогда можно использовать диапазоны разрешения.

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

Вы использовали *Порог 1011 * в вашем примере Galaxy S8 + сообщает 412x846 с этим кодом:

console.log("width: " + screen.width + ", height: " + screen.height);

Разрешения устройств меняются каждый год, и они начинают перекрываться друг с другом.Большие телефоны имеют более высокое разрешение, чем маленькие планшеты, и большие планшеты имеют более высокое разрешение, чем некоторые настольные компьютеры.

Вам может это сойти с рук, если вы просто хотите, чтобы он работал в основном, или если вы хотите обнаруживать определенные телефоны.

Однако ненадежно использовать разрешение экрана для определения типа устройства.

Answer 5

Вероятно, не помешает добавить эту функцию на ваш сайт для тех, кто действительно использует браузеры с поддержкой JavaScript на своих мобильных устройствах.Что касается тех, кто этого не делает, ну, вы мало что можете с ними поделать, кроме простого выбора, например, выбора размера экрана при первой загрузке?Может быть, простой выпадающий список с возможными размерами?