Автоопределение мобильного браузера (через user-agent?) [Закрыто]


291

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


12
IPad считается? :)
Сева Алексеев

33
Комментарий Севы поднимает хороший вопрос. Что на самом деле означает «мобильный» сегодня? Относится ли это к «функциональному телефону», у которого есть браузер, но не очень большой? Относится ли это к полнофункциональным смартфонам, где способ ввода и разрешение экрана являются ограничивающими факторами? Как насчет планшетов, с которыми легко взаимодействовать и которые имеют дисплеи высокого разрешения? Как насчет таких устройств, как медиацентры - они никогда не покидают гостиную, но имеют схожие ограничения. Друг на работе прислал мне это. Я нашел это очень проницательным. slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21

1
@Ricki, но на ipad вы все еще не можете, например, отображать флэш-контент или использовать редактор форматированного текста на основе JavaScript, например tinymce.
Ти Джей Эллис

1
Ipad не может просматривать флэш, но это другая тема, например, определить, поддерживает ли браузер Flash.
Шон

2
Просто сообщение из будущего, но любой, кто заинтересован в обслуживании мобильной версии своего сайта, может заинтересоваться некоторыми статьями об «адаптивном дизайне».
Ваэль Виктус

Ответы:


91

Да, чтение заголовка User-Agent поможет.

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

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

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

который, например, переместит запросы на http: //domain/index.html на http: //domain/mobile/index.html

Если вам не нравится, когда скрипт периодически воссоздает файл htaccess, вы можете написать модуль, который проверяет пользовательский агент (я не нашел уже созданного, но нашел этот особенно подходящий пример ) и получить пользовательские агенты. с некоторых сайтов, чтобы обновить их. Тогда вы можете усложнить подход столько, сколько захотите, но я думаю, что в вашем случае предыдущий подход был бы нормальным.


3
Можно ли это сделать на уровне веб-сервера (Apache) с помощью некоторого типа команды .htaccess - вместо использования языка сценариев, такого как PHP?

любая идея, чтобы установить корень документа пользовательским агентом
Carson

126

Есть сценарии с открытым исходным кодом на Detect Mobile Browser которые делают это на Apache, ASP, ColdFusion, JavaScript и PHP.


5
@ Guitar Если это так, то вы должны отправить в свой UA.
Адам Таттл

9
Блеф ... Мне действительно не нравится "кодовый запах" этих решений. Соответствие регулярному выражению с использованием набора 4-символьных префиксов без понятия о том, откуда они пришли ... нет, спасибо.
Мы все Моника

2
Это одно из регулярных регулярных выражений. Я согласен, запах кода не очень хорош на этом.
Джек Кокс

5
Мне также не нравятся решения с «открытым исходным кодом» без лицензии и без указания обновлений.
Эдуардо

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

33

Просто мысль, но что, если вы решили эту проблему с противоположной стороны? Вместо того, чтобы определять, какие браузеры являются мобильными, почему бы не определить, какие браузеры не являются? Затем код вашего сайта по умолчанию для мобильной версии и перенаправить на стандартную версию. При взгляде на мобильный браузер есть две основные возможности. Либо у него есть поддержка javascript, либо нет. Так что, если браузер не поддерживает Javascript, он по умолчанию будет мобильной версией. Если у него есть поддержка JavaScript, проверьте размер экрана. Все, что ниже определенного размера, также может быть мобильным браузером. Все, что больше, будет перенаправлено на ваш стандартный макет. Тогда все, что вам нужно сделать, это определить, является ли пользователь с отключенным JavaScript мобильным или нет.
Согласно W3C, количество пользователей с отключенным JavaScript было около 5%, и большинство пользователей отключили его, что означает, что они действительно знают, что делают с браузером. Они большая часть вашей аудитории? Если нет, то не беспокойтесь о них. Если так, каков худший сценарий? Эти пользователи просматривают мобильную версию вашего сайта, и это хорошо.


3
Это очень хорошая идея, я думаю, что это элегантное решение.
Максим Векслер

3
+1 это звучит довольно милая идея, но повлияет ли это на сканеров поисковых систем?
Майки G

Это ошибочная идея. Расширения браузера, которые отключают javascript, очень популярны в настольных браузерах, поэтому при условии, что ни один javascript не означает, что мобильный просто ошибочен. Разрешение окна / окна просмотра / экрана не имеет ничего общего с размером браузера, и если предположить, что низкое разрешение указывает на размер портативного устройства, ваше веб-приложение будет уродливым и разочаровывающим для многих пользователей. (Например: настольные браузеры в не полноэкранных окнах, большие планшеты.)
ʇsәɹoɈ

31

Вот как я делаю это в JavaScript:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

См. Пример на www.tablemaker.net/test/mobile.html, где он утраивает размер шрифта на мобильных телефонах.


если вы хотите объединить свои учетные записи, см. здесь: meta.stackexchange.com/questions/18232/…
Брэндон

Это не будет работать, когда дело доходит до планшета (например, iPad)
Si8

Используйте «моби» из-за Opera Mobile.
mgutt

1
И вам нужен «Opera Mini», так как это один из редких браузеров, не использующих «mobi» в User Agent.
mgutt

17

Мой любимый механизм обнаружения мобильных браузеров - WURFL . Он часто обновляется и работает со всеми основными платформами программирования / языка.


Это хорошо, но утверждение «работает со всеми основными платформами программирования / языка» немного смелое.
Кайл


Теперь она доступна только под досадной лицензией AGPL, если вы ее не купите. en.wikipedia.org/wiki/WURFL#License_update
MarkJ

17

Рассматривали ли вы использование медиа-запросов css3? В большинстве случаев вы можете применять некоторые стили CSS специально для целевого устройства, не создавая отдельную мобильную версию сайта.

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

Вы можете установить ширину по своему усмотрению, но 1025 будет ловить iPad в альбомной ориентации.

Вы также захотите добавить следующий метатег к своей голове:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Ознакомьтесь с этой статьей на HTML5 Rocks для некоторых хороших примеров


1
Я думаю, что это действительно лучший путь. Скрипты, которые смотрят строки агента пользователя, предназначены для устаревания. Просмотр доступной экранной недвижимости позволяет адаптивно проектировать, не беспокоясь о том, что новые устройства не обнаруживаются.
Адам Таттл

1
Это работает только для обнаружения на стороне клиента. Но если вы хотите, чтобы ваша сторона сервера работала по-разному для мобильных клиентов, вам нужно использовать другую технику.
Игорь Брейц

Это с треском проваливается для настольных браузеров, которые не работают в полноэкранном режиме. Если вы все равно решите это сделать, не тратьте пространство экрана с огромными шрифтами и полями или скрывайте важные функции / информацию за раскрывающимися меню. Это сделает ваш сайт / приложение уродливым и разочаровывающим для некоторых ваших пользователей.
ɈsәɹoɈ

13

для Android, IPhone, IPAD, Blackberry, PALM, WINDOWS CE, PALM

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

Я нашел это весьма полезным.
bozdoz

Вы обязательно должны проверить Conditionizr, который будет обрабатывать все это для вас! Вы можете добавлять пользовательские тесты, получать их через объектные тесты и иметь обратные вызовы. У них также есть целый ряд готовых тестов: conditionizr.com/detects
Halcyon991

Elenasys, спасибо за полезный ответ. Хотя я не могу найти UA, соответствующий "windows \ sce" в моей базе данных.
Нефски

1
Это не работает для телефонов Windows.
Jwerre

спасибо, но Windows Phone не был указан ...
Jorgesys

6

Файл браузера для мобильных устройств - отличный способ обнаружить мобильные (и другие) рекламные ролики для проектов ASP.NET: http://mdbf.codeplex.com/


Браузер мобильных устройств все еще работает? Я заметил, что есть запись о том, что он не в сети? ...
creativeedg10

5

Вы можете просто обнаруживать мобильные клиенты navigator.userAgentи загружать альтернативные сценарии в зависимости от типа обнаруженного клиента:

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/iPad/i)
          || navigator.userAgent.match(/iPod/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

Для более управляемого решения, вы можете использовать Conditionizr, который будет обрабатывать все это для вас! Вы можете добавлять пользовательские тесты, получать их через объектные тесты и иметь обратные вызовы. У них также есть целый ряд готовых тестов: conditionizr.com/detects
Halcyon991

4

Вы можете проверить строку User-Agent. В JavaScript это действительно просто, это просто свойство объекта навигатора.

var useragent = navigator.userAgent;

Вы можете проверить, если устройство iPhone или Blackberry в JS с чем-то вроде

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

если isIphone истина, вы заходите на сайт с Iphone, если isBlackBerry вы заходите на сайт с Blackberry.

Вы можете использовать плагин UserAgent Switcher для Firefox, чтобы проверить это.

Если вы также заинтересованы, возможно, стоит проверить мой скрипт "redirection_mobile.js", размещенный на github здесь https://github.com/sebarmeli/JS-Redirection-Mobile-Site, и вы можете прочитать более подробную информацию в одном из моя статья здесь:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/


1
Использование .match здесь неправильно, вы хотите использовать .test (), который оценивает логическое значение, он также намного быстрее, чем .match () и не возвращает массив. Для более удобного решения для тестирования вашего userAgent вы можете использовать Conditionizr, который все это сделает за вас! Вы можете добавлять пользовательские тесты, получать их через объектные тесты и иметь обратные вызовы. У них также есть ряд готовых тестов: conditionizr.com/detects
Halcyon991

4
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

Этот пример работает в asp.net



0

Да, пользовательский агент используется для обнаружения мобильных браузеров. Есть много бесплатных скриптов, доступных для проверки этого. Вот один из таких php-кодов, который поможет вам перенаправить мобильных пользователей на другой сайт.


1
Можно ли это сделать на уровне веб-сервера (Apache) с помощью некоторого типа команды .htaccess - вместо использования PHP?

0

Я поместил это демо со сценариями и примерами, включенными вместе:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

В этом примере используются функции php для обнаружения пользовательского агента и предлагается дополнительное преимущество, позволяющее пользователям указывать предпочтения для версии сайта, которая обычно не будет использоваться по умолчанию в зависимости от их браузера или типа устройства. Это делается с помощью куки-файлов (поддерживается с помощью php на стороне сервера, в отличие от javascript.)

Не забудьте проверить ссылку на скачивание в статье для примеров.

Надеемся, вам понравится!


0

MobileESP имеет хуки PHP, Java, APS.NET (C #), Ruby и JavaScript. у него также есть лицензия Apache 2, поэтому она бесплатна для коммерческого использования. Ключевым для меня является то, что он определяет только браузеры и платформы, а не размеры экрана и другие метрики, что делает его небольшим.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.