Обнаружение телефона против планшета

Есть ли способ определить, использует ли пользователь планшет или телефон? Например, человек, занимающийся серфингом в Интернете с помощью планшета (любой планшет Android с версией 3+ и iPad), он, несомненно, хотел бы просмотреть ту же не урезанную версию, что и человек, сидящий на настольном компьютере. И телефон-серфер наверняка предпочел бы урезанную версию сайта, потому что он быстрее загружается и может быть проще перемещаться с помощью большого пальца. Это можно сделать с помощью проверки ширины экрана октавы UserAgent:

Каков наилучший способ обнаружения мобильного устройства в jQuery?

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

Есть ли способ обнаружить это или мне нужно сделать компромисс?

Ответ 1

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

В этом случае я попытался бы реализовать логику на основе значений, переданных пользовательским агентом в заголовках HTTP ([mobiforge.com...]) и грамотно деградировать, чтобы вызвать пользователя, если информация недоступна.

Ваша логика может выглядеть примерно так:

Если пользовательский агент поставляет размер физического экрана в заголовках HTTP
физические размеры = значение UA.
в противном случае, если пользовательский агент предоставляет разрешение и размеры пикселей
физические размеры = размеры пикселей, деленные на разрешение.
(необязательно), использовать клиентскую сторону script для обнаружения разрешения и PPI
в противном случае, если строка пользовательского агента выглядит как какое-то мобильное устройство (регулярное выражение)
предложите пользователю выбрать.
в противном случае
предположим вариант по умолчанию.

Обновление: Мой ответ сейчас три года. Стоит отметить, что поддержка гибкого дизайна значительно продвинулась и теперь стала общей для доставки одного и того же контента на все устройства и опираться на запросы css media, чтобы представить сайт таким образом, который наиболее эффективен для устройства, на котором он просматривается.

Ответ 2

Основано на предложении Google: найденный здесь (также упоминаемый Грегом), это то, что я использовал в проектах раньше.

if (/mobile/i.test(navigator.userAgent) && !/ipad|tablet/i.test(navigator.userAgent)) {
    console.log("it a phone"); // your code here
}

Возможно, это не самое элегантное решение... но оно делает свою работу.

Ответ 3

Если вы используете медиа-запросы в теории, вы можете использовать карманный компьютер @media, но поддержка в значительной степени несуществует.

Простейшим способом идентификации мобильных устройств с высоким разрешением будет просмотр DPI экрана и соотношения пикселей устройства (через теги webkit/mozilla, относящиеся к конкретным производителям)

@media (-webkit-max-device-pixel-ratio: 2),  
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) {
   ...
}

edit: window.devicePixelRatio сделать выше в JS

Здесь есть хорошая статья с множеством идей для идентификации мобильных устройств.

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Ответ 4

Если вы используете Кордову, мне это нравится:

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet

то в любом месте вашего кода вызовите это:

window.isTablet

Ответ 5

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

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

Если вы попытаетесь вычислить устройство ppi, они почти все неизбежно выйдут на 96ppi, будь то рабочий стол или телефон.

Поиск IPad/iPod/iPhone в строке пользовательского агента для обнаружения любого устройства Apple. Это скажет вам, есть ли у вас планшет или телефон /iPod от Apple. К счастью, у i-устройств намного меньше вкусов, поэтому их также легче отличить.

Чтобы определить устройство Android, найдите "Android" в строке пользовательского агента. Чтобы определить, является ли это планшетом или телефоном, пользовательский агент телефона (для собственного браузера и хром для Android) будет содержать "Mobile Safari", тогда как планшет будет содержать только "Safari". Этот метод рекомендуется Google:

В качестве решения для мобильных сайтов наши инженеры Android рекомендуют в частности, обнаруживать "мобильный" в строке User-Agent, а также "Андроид".

Более полное описание можно найти здесь:

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

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

Ответ 6

Вы можете использовать что-то вроде Device Atlas, чтобы обнаружить эти функции у User Agent. Предлагайте API, который вы можете разместить сами, и они также предлагают облачный сервис. Оба являются премиальными (оплачиваются)

В качестве альтернативы вы можете использовать что-то вроде Wurfl, которое, по моему опыту, менее точно.

Ответ 7

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

Ответ 8

Я думаю, что WURFL может быть чем-то посмотреть: http://wurfl.sourceforge.net/help_doc.php Его немного более хардкор с его более серверным решением, а не просто с помощью простых медиа-запросов (например, ваш собственный или с использованием фреймворка, такого как Foundation CSS) или с помощью чистого javascript (adapt.js).

Чем может быть что-то вроде:

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true');
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true');
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true');
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true');

if (!$is_wireless) {
 if ($is_smarttv) {
  echo "This is a Smart TV";
 } else {
  echo "This is a Desktop Web Browser";
 }
} else {
 if ($is_tablet) {
  echo "This is a Tablet";
 } else if ($is_phone) {
  echo "This is a Mobile Phone";
 } else {
  echo "This is a Mobile Device";
 }
}

ref: http://wurfl.sourceforge.net/php_index.php

или в Java:

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName());
WURFLManager manager = wurfl.getWURFLManager();
Device device = manager.getDeviceForRequest(request);
String x = device.getCapability("is_tablet"); //returns String, not boolean btw

ref: http://wurfl.sourceforge.net/njava_index.php

Ответ 9

Как и многие другие плакаты, вам, скорее всего, захочется проанализировать заголовок запроса User-Agent. Для этой цели я нашел очень полезную ua-parser-js.