Определить телефон против планшета

Question

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

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

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

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

Answer 1

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

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

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

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

---

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

Answer 2

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

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

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

Answer 3

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

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

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

window.isTablet

Answer 4

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

Простейшим способом идентификации мобильных устройств с высоким разрешением было бы посмотреть на 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

Answer 5

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

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

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

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

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

. В качестве решения для мобильных сайтов наши инженеры Android рекомендуют специально определять «mobile» в строке User-Agent, а также «android».

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

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

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

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

Я думаю, что 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