Автоматичне виявлення мобільного браузера (через користувальницький агент?) [Закрито]

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

Так, читання заголовка User-Agent дозволить зробити це.

Є деякі списки з там відомих мобільних агентів користувачів , так що вам не потрібно починати з нуля. Що я робив, коли мені довелося, - це створити базу даних відомих користувальницьких агентів і зберігати невідомі, коли вони виявляються для перегляду, а потім вручну з'ясувати, що вони є. Останнє в деяких випадках може бути надмірним.

Якщо ви хочете зробити це на рівні Apache, ви можете створити сценарій, який періодично генерує набір правил перезапису, перевіряючи агент користувача (або просто один раз і забудьте про нові користувацькі агенти, або раз на місяць, що підходить для вашої справи), наприклад

RewriteEngine On

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

який перемістить, наприклад, запити на http: //domain/index.html до http: //domain/mobile/index.html

Якщо вам не подобається підхід до того, щоб сценарій періодично відтворював файл htaccess, ви можете написати модуль, який перевіряє User Agent (я не знайшов такого вже зробленого, але знайшов цей особливо відповідний приклад ) та отримати користувальницьких агентів з деяких сайтів для їх оновлення. Тоді ви можете ускладнити підхід скільки завгодно, але я думаю, що у вашому випадку попередній підхід був би добре.

У браузері Detect Mobile є скрипти з відкритим кодом, які роблять це в 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.

Якщо ви також зацікавлені, можливо, варто перевірити мій сценарій "перенаправлення_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 для виявлення агента користувача та пропонує додаткову перевагу, дозволяючи користувачам заявляти про перевагу для тієї версії сайту, яка зазвичай не є типовою залежно від типу їх браузера чи пристрою. Це робиться за допомогою файлів cookie (підтримується за допомогою 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