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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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