#mobile #desktop #tablet #modernizr #device-detection
#Мобильный #Для рабочего стола #таблетка #modernizr #обнаружение устройства
Вопрос:
Я хочу использовать Modernizr для определения, просматривает ли пользователь сайт на настольном компьютере, планшете или мобильном устройстве.
Мои первоначальные мысли, очевидно, состоят в том, чтобы проверить размеры экрана, которых должно быть достаточно для мобильных устройств, а также для больших настольных компьютеров. Для планшетных устройств, где размер экрана может также равняться небольшому экрану рабочего стола (1024 x 768) Я бы также проверил события касания.
На данный момент я хотел бы сосредоточиться на мобильных / планшетных устройствах, которые, по выражению jQuery mobile, являются первоклассными. Я не собираюсь подключаться к каким-либо конкретным функциям мобильного устройства, просто определяю desktop, tablet или mobile и создаю индивидуальный пользовательский интерфейс для каждого, добавляя классы CSS в зависимости от результатов теста.
Считаете ли вы, что этого достаточно для достижения того, чего я хочу, или вы думаете, что я должен тестировать другие возможности? Заранее большое спасибо.
Ответ №1:
Этот вопрос немного устарел, но я не смог найти лучшего ответа, когда погуглил его.
Большинство рабочих столов теперь поддерживают сенсорное управление, поэтому его обнаружение не имеет значения.
Лучший способ определить их — по размеру экрана.
С помощью Modernizr вы можете использовать if (Modernizr.mq('only all and (max-width: 480px)')) { ...}
Комментарии:
1. Дисплеи Retina усложняют эту задачу, поскольку теоретически они имеют разрешение, аналогичное разрешению некоторых настольных компьютеров
2. да, реальная проблема больше не в разрешении экрана… но имеет значение скорее измерение реального мира … устройство 4 дюйма или 19 дюймов…
3. Я думаю, он имеет в виду, что браузеры, работающие на настольных компьютерах, поддерживают сенсорное управление, в отличие от самого настольного оборудования.
4. Нет, я имел в виду само оборудование. Я живу в Лондоне. Почти каждый ноутбук теперь оснащен сенсорными экранами. То же самое для большинства компьютеров All in one.
5. Независимо от того, является ли касание рабочего стола «нормальным», это все равно важно, так что touch ! = мобильный. Вы должны использовать как touch, так и size вместе.
Ответ №2:
Modernizr может проверять наличие событий касания
Для тестирования того, является ли устройство планшетом, телефоном или настольным компьютером, я бы, вероятно, больше склонялся к использованию пользовательских агентов. Взгляните на сценарии на DetectMobileBrowsers.com
Modernizr просто проверяет, поддерживает ли браузер определенные функции. Насколько я знаю, он, похоже, не тестирует browser_type == mobile и не работает в этом направлении…
Имейте в виду, что многие современные настольные ПК в наши дни оснащены сенсорными экранами, поэтому даже обнаружение сенсорной поддержки не гарантирует, что это мобильное устройство или планшет.
Комментарии:
1.[DetectMobileBrowsers][1] использование с [jQuery][2]
if($.browser.mobile){// your code}— Сif ( Modernizr.touch ) { // your code}документацией modernizr modernizr touch2. Тем не менее, он также называет Windows 8 «сенсорной». Поэтому, если вы пытаетесь скрыть анимацию или ограничить пропускную способность, в этой ситуации он выдает ложное срабатывание.
3. Также некоторые проблемы в firefox, где Modernizr.touch возвращает true
4. Modernizr ничего не говорит вам об устройстве… только браузер. На некоторых устройствах с сенсорными экранами работают браузеры, которые не поддерживают события касания; на некоторых устройствах без сенсорных экранов работают браузеры, которые поддерживают события касания. -> github.com/Modernizr/Modernizr/issues/651#issuecomment-13939129
5. Как никто не объединил их в единое решение?
Ответ №3:
Вы можете использовать следующее расширение для Modernizr: https://www.npmjs.org/package/mobile-detect
Или (без Modernizr) вы могли бы использовать Restive.JS для добавления класса «.phone» или «.tablet» в ваше тело: http://docs.restivejs.com
(Найдите «formfactor» внизу страницы.)
Комментарии:
1. UA Parser составляет всего 12 тыс. против 37 тыс. для обнаружения с мобильных устройств.
2. restivejs.com мертв.
Ответ №4:
Это последующий ответ на старый вопрос, поскольку я считаю, что «правильный» ответ изменился со временем.
- Сегодня многие ноутбуки поддерживают сенсорное управление
- Новые мобильные устройства имеют более высокое разрешение, чем большинство компьютерных мониторов, но при этом имеют значительно меньший физический экран
Лучший способ, который я нашел, чтобы обойти это, — рассчитать физический размер экрана путем умножения DPI экрана в сочетании с размером экрана в пикселях.
Комментарии:
1. На многих устройствах (мобильных) аппаратный пиксель! = программный пиксель. Вот почему, хотя телефон может иметь аппаратное разрешение дисплея 1080 x 2340 пикселей, мобильный браузер будет обрабатывать его как 393 x 665 пикселей, что приведет к увеличению размеров элементов и более подробным шрифтам.