Automatyczne wykrywanie przeglądarki mobilnej (za pośrednictwem klienta?) [Zamknięte]

Jak mogę wykryć, czy użytkownik przegląda moją stronę internetową za pomocą mobilnej przeglądarki internetowej, dzięki czemu mogę automatycznie wykryć i wyświetlić odpowiednią wersję mojej strony internetowej?

Tak, czytanie nagłówka User-Agent załatwi sprawę.

Istnieje kilka list out tam znanych mobilnych agentów użytkownika, dzięki czemu nie trzeba zaczynać od zera. To, co zrobiłem, gdy musiałem to zbudować bazę danych znanych programów użytkownika i przechowywać nieznane dane, które są wykrywane w celu rewizji, a następnie ręcznie ustalić, jakie są. Ta ostatnia rzecz może być przesadą w niektórych przypadkach.

Jeśli chcesz to zrobić na poziomie Apache, możesz utworzyć skrypt, który okresowo generuje zestaw reguł przepisywania sprawdzających agenta użytkownika (lub tylko raz i zapomina o nowych klientach użytkownika, lub raz w miesiącu, w zależności od przypadku), na przykład

RewriteEngine On

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

które przenosiłyby na przykład żądania do http: //domain/index.html do http: //domain/mobile/index.html

Jeśli nie podoba ci się podejście polegające na okresowym odtwarzaniu skryptu przez plik htaccess, możesz napisać moduł sprawdzający agenta użytkownika (nie znalazłem już utworzonego, ale znalazłem ten szczególnie odpowiedni przykład ) i uzyskaj agenty użytkownika z niektórych witryn, aby je zaktualizować. Następnie możesz skomplikować podejście tak bardzo, jak chcesz, ale myślę, że w twoim przypadku poprzednie podejście byłoby w porządku.

W przeglądarce Detect Mobile Browser znajdują się skrypty open source, które robią to w Apache, ASP, ColdFusion, JavaScript i PHP.

Tylko myśl, ale co, jeśli rozwiążesz ten problem z przeciwnej strony? Zamiast określać, które przeglądarki są mobilne, dlaczego nie określić, które przeglądarki nie są? Następnie zakoduj swoją witrynę do domyślnej wersji mobilnej i przekieruj do standardowej wersji. Istnieją dwie podstawowe możliwości, patrząc na przeglądarkę mobilną. Albo ma obsługę javascript, albo nie. Jeśli więc przeglądarka nie obsługuje javascript, domyślnie będzie dostępna wersja mobilna. Jeśli obsługuje JavaScript, sprawdź rozmiar ekranu. Wszystko poniżej pewnego rozmiaru prawdopodobnie będzie także przeglądarką mobilną. Coś większego zostanie przekierowane do standardowego układu. Następnie wszystko, co musisz zrobić, to ustalić, czy użytkownik z wyłączoną obsługą JavaScript jest mobilny, czy nie.
Według W3C liczba użytkowników z wyłączonym JavaScript wynosiła około 5%, a większość z nich wyłączyła go, co oznacza, że ​​faktycznie wiedzą, co robią z przeglądarką. Czy stanowią dużą część twojej publiczności? Jeśli nie, nie przejmuj się nimi. Jeśli tak, jaki jest najgorszy scenariusz? Masz użytkowników przeglądających mobilną wersję Twojej witryny, i to dobrze.

Oto jak to zrobić w JavaScript:

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

Zobacz przykład na www.tablemaker.net/test/mobile.html, gdzie trzykrotnie zwiększa rozmiar czcionki w telefonach komórkowych.

Moim ulubionym mechanizmem wykrywania mobilnej przeglądarki jest WURFL . Jest często aktualizowany i działa z każdą większą platformą programistyczną / językową.

Czy rozważałeś użycie zapytań o media css3? W większości przypadków możesz zastosować niektóre style css specjalnie dla docelowego urządzenia bez konieczności tworzenia osobnej mobilnej wersji witryny.

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

Możesz ustawić szerokość na dowolną, ale 1025 złapie widok poziomy iPada.

Będziesz także chciał dodać następujący metatag do swojej głowy:

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

Sprawdź ten artykuł w HTML5 Rocks, aby znaleźć kilka dobrych przykładów

dla 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>

Plik przeglądarki urządzeń mobilnych to świetny sposób na wykrycie mobilnych (i innych) przeglądarek dla projektów ASP.NET: http://mdbf.codeplex.com/

Możesz po prostu wykryć klientów mobilnych navigator.userAgenti załadować alternatywne skrypty na podstawie wykrytego typu klienta jako:

 $(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
    }

    });

Możesz sprawdzić ciąg User-Agent. W JavaScript jest to bardzo proste, to tylko właściwość obiektu nawigatora.

var useragent = navigator.userAgent;

Możesz sprawdzić, czy urządzenie, czy iPhone lub Blackberry w JS z czymś takim

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

jeśli isIphone jest prawdą, uzyskujesz dostęp do witryny z iPhone'a, jeśli isBlackBerry uzyskujesz dostęp do strony z Blackberry.

Możesz użyć wtyczki „UserAgent Switcher” dla Firefoxa, aby to przetestować.

Jeśli jesteś również zainteresowany, może warto sprawdzić mój skrypt „redirection_mobile.js” hostowany na github tutaj https://github.com/sebarmeli/JS-Redirection-Mobile-Site i możesz przeczytać więcej szczegółów w jednym z mój artykuł tutaj:

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");
    }
}

Ten przykład działa w asp.net

Nie powiedziałeś, jakiego języka używasz. Jeśli to Perl, to jest trywialny:

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
}

Tak, klient użytkownika służy do wykrywania przeglądarek mobilnych. Dostępnych jest wiele bezpłatnych skryptów, które mogą to sprawdzić. Oto jeden taki kod php, który pomoże Ci przekierować użytkowników mobilnych na inną stronę.

Złożyłem to demo ze skryptami i przykładami zawartymi razem:

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

Ten przykład wykorzystuje funkcje php do wykrywania agenta użytkownika i oferuje dodatkową korzyść polegającą na tym, że pozwala użytkownikom określić preferencje dotyczące wersji witryny, która zazwyczaj nie byłaby domyślna w zależności od przeglądarki lub typu urządzenia. Odbywa się to za pomocą plików cookie (utrzymywanych przy użyciu php po stronie serwera w przeciwieństwie do javascript).

Pamiętaj, aby sprawdzić link do pobrania w artykule przykładów.

Mam nadzieję, że ci się podoba!

MobileESP ma haki PHP, Java, APS.NET (C #), Ruby i JavaScript. ma również licencję Apache 2, więc jest bezpłatna do użytku komercyjnego. Najważniejsze dla mnie jest to, że identyfikuje tylko przeglądarki i platformy, a nie rozmiary ekranów i inne parametry, co sprawia, że ​​jest miły i mały.

Istnieje nowe rozwiązanie wykorzystujące Zend Framework. Zacznij od linku do Zend_HTTP_UserAgent:

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