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

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

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

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

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

RewriteEngine On

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

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

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

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

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

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

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

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

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

Рассматривали ли вы использование медиа-запросов 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 для некоторых хороших примеров

для 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>

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

Вы можете просто обнаруживать мобильные клиенты 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
    }

    });

Вы можете проверить строку 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/

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

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

Вы не сказали, какой язык вы используете. Если это Perl, то это тривиально:

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}

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

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

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

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

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

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

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

Существует новое решение с использованием Zend Framework. Начните со ссылки на Zend_HTTP_UserAgent:

http://framework.zend.com/manual/en/zend.http.html