Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

Ответ 1

Modernizr может проверять события касания

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Или (без Modernizr) вы можете использовать Restive.JS, чтобы добавить к вашему телу класс ".phone" или ".tablet": http://docs.restivejs.com

(Ищите "formfactor" вниз по странице.)