Использование Modernizr для тестирования планшетов и мобильных устройств-мнения

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

мои первоначальные первые мысли, очевидно, проверить размеры экрана, которые должны быть достаточно для мобильных устройств, а также для больших настольных компьютеров. Для планшетных устройств, где размер экрана также может равняться размеру небольшого экрана рабочего стола (1024 x 768), я бы также проверил сенсорные события.

в это время я хотел бы сосредоточиться на мобильных / планшетных устройствах, которые, как jQuery mobile ставит это, a-grade. Я не ищу, чтобы подключиться к каким-либо конкретным функциям мобильного устройства просто обнаружить рабочий стол, планшет или мобильный и обслуживать индивидуальный пользовательский интерфейс для каждого путем добавления классов CSS в зависимости от результатов теста.

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

37
desktop device-detection mobile modernizr tablet

4 ответов

Modernizr смогите проверить для событий касания

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

Modernizr просто проверяет, поддерживает ли браузер определенные функции. Насколько я знаю, это не похоже на test browser_type == mobile и все в этом роде...

имейте в виду, что многие современные настольные ПК в наши дни имеют сенсорные экраны, поэтому даже обнаружение сенсорной поддержки не гарантирует, что это мобильное устройство или планшет.

36

этот вопрос немного староват, но я не мог найти лучшего ответа, когда я погуглил его.

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

лучший способ обнаружить их-это размер экрана.

С Modernizr вы можете использовать if (Modernizr.mq('only all and (max-width: 480px)')) { ...}

46

вы можете использовать следующее расширение для Modernizr: https://www.npmjs.org/package/mobile-detect

или (без Modernizr) вы можете использовать Restive.JS добавить".телефон или." таблетка " - класс для вашего тела: http://docs.restivejs.com

(найдите "formfactor" внизу страницы.)

4

Это последующий ответ на старый вопрос, поскольку я считаю, что "правильный" ответ изменился со временем.

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

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

0