Mobiler Browser automatisch erkennen (über User-Agent?) [Geschlossen]

Wie kann ich feststellen, ob ein Benutzer meine Website über einen mobilen Webbrowser anzeigt, damit ich die entsprechende Version meiner Website automatisch erkennen und anzeigen kann?

Ja, das Lesen des User-Agent-Headers reicht aus.

Es gibt einige Listen heraus dort von bekannten mobilen User - Agents , so dass Sie brauchen nicht von Grund auf neu zu starten. Was ich getan habe, als ich musste, war, eine Datenbank bekannter Benutzeragenten zu erstellen und Unbekannte zu speichern, wenn diese zur Überarbeitung erkannt werden, und dann manuell herauszufinden, was sie sind. Diese letzte Sache könnte in einigen Fällen übertrieben sein.

Wenn Sie dies auf Apache-Ebene tun möchten, können Sie ein Skript erstellen, das regelmäßig eine Reihe von Umschreiberegeln generiert, die den Benutzeragenten überprüfen (oder nur einmal und neue Benutzeragenten vergessen oder einmal im Monat, je nachdem, was für Ihren Fall geeignet ist)

RewriteEngine On

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

Dies würde beispielsweise Anforderungen an http: //domain/index.html nach http: //domain/mobile/index.html verschieben

Wenn Sie den Ansatz nicht mögen, dass ein Skript eine htaccess-Datei regelmäßig neu erstellt, können Sie ein Modul schreiben, das den Benutzeragenten überprüft (ich habe keinen bereits erstellten gefunden, aber dieses besonders geeignete Beispiel gefunden ) und die Benutzeragenten abrufen von einigen Websites, um sie zu aktualisieren. Dann können Sie den Ansatz so komplizieren, wie Sie möchten, aber ich denke, in Ihrem Fall wäre der vorherige Ansatz in Ordnung.

Es gibt Open Source-Skripte in Detect Mobile Browser , die dies in Apache, ASP, ColdFusion, JavaScript und PHP tun.

Nur ein Gedanke, aber was wäre, wenn Sie dieses Problem aus der entgegengesetzten Richtung lösen würden? Anstatt zu bestimmen, welche Browser mobil sind, sollten Sie feststellen, welche Browser nicht mobil sind. Codieren Sie dann Ihre Site so, dass standardmäßig die mobile Version verwendet wird, und leiten Sie zur Standardversion um. Beim Betrachten eines mobilen Browsers gibt es zwei grundlegende Möglichkeiten. Entweder unterstützt es Javascript oder nicht. Wenn der Browser keine Javascript-Unterstützung bietet, wird standardmäßig die mobile Version verwendet. Wenn JavaScript unterstützt wird, überprüfen Sie die Bildschirmgröße. Alles, was unter einer bestimmten Größe liegt, ist wahrscheinlich auch ein mobiler Browser. Alles, was größer ist, wird zu Ihrem Standardlayout umgeleitet. Dann müssen Sie nur noch feststellen, ob der Benutzer mit deaktiviertem JavaScript mobil ist oder nicht.
Laut W3C betrug die Anzahl der Benutzer mit deaktiviertem JavaScript etwa 5%, und die meisten Benutzer haben es deaktiviert, was bedeutet, dass sie tatsächlich wissen, was sie mit einem Browser tun. Sind sie ein großer Teil Ihres Publikums? Wenn nicht, dann mach dir keine Sorgen um sie. Wenn ja, was ist der schlimmste Fall? Diese Benutzer durchsuchen die mobile Version Ihrer Website, und das ist gut so.

So mache ich das in JavaScript:

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

Ein Beispiel finden Sie unter www.tablemaker.net/test/mobile.html, wo die Schriftgröße auf Mobiltelefonen verdreifacht wird.

Mein bevorzugter Mechanismus zur Erkennung mobiler Browser ist WURFL . Es wird regelmäßig aktualisiert und funktioniert mit allen gängigen Programmier- / Sprachplattformen.

Haben Sie darüber nachgedacht, CSS3-Medienabfragen zu verwenden? In den meisten Fällen können Sie einige CSS-Stile speziell für das Zielgerät anwenden, ohne eine separate mobile Version der Site erstellen zu müssen.

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

Sie können die Breite beliebig einstellen, aber 1025 fängt die iPad-Querformatansicht ab.

Sie möchten Ihrem Kopf auch das folgende Meta-Tag hinzufügen:

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

In diesem Artikel bei HTML5 Rocks finden Sie einige gute Beispiele

für 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>

Die Browserdatei für mobile Geräte ist eine hervorragende Möglichkeit, mobile (und andere) Browser für ASP.NET-Projekte zu erkennen: http://mdbf.codeplex.com/

Sie können mobile Clients einfach durch erkennen navigator.userAgentund alternative Skripts basierend auf dem erkannten Client-Typ wie folgt laden:

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

    });

Sie können die User-Agent-Zeichenfolge überprüfen. In JavaScript ist das wirklich einfach, es ist nur eine Eigenschaft des Navigatorobjekts.

var useragent = navigator.userAgent;

Sie können überprüfen, ob das Gerät iPhone oder Blackberry in JS mit so etwas

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

Wenn isIphone wahr ist, greifen Sie von einem Iphone auf die Site zu. Wenn isBlackBerry, greifen Sie von einem Blackberry auf die Site zu.

Sie können das Plugin "UserAgent Switcher" für Firefox verwenden, um dies zu testen.

Wenn Sie auch interessiert sind, kann es sich lohnen, mein auf github gehostetes Skript "redirection_mobile.js" hier https://github.com/sebarmeli/JS-Redirection-Mobile-Site zu lesen, und Sie können weitere Details in einer von lesen Mein Artikel hier:

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

Dieses Beispiel funktioniert in asp.net

Sie haben nicht gesagt, welche Sprache Sie verwenden. Wenn es Perl ist, dann ist es trivial:

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
}

Ja, User-Agent wird verwendet, um mobile Browser zu erkennen. Es gibt viele kostenlose Skripte, um dies zu überprüfen. Hier ist ein solcher PHP-Code, mit dem Sie mobile Benutzer auf eine andere Website umleiten können.

Ich habe diese Demo mit Skripten und Beispielen zusammengestellt:

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

Dieses Beispiel verwendet PHP-Funktionen zur Erkennung von Benutzeragenten und bietet den zusätzlichen Vorteil, dass Benutzer eine Präferenz für eine Version der Site angeben können, die aufgrund ihres Browsers oder Gerätetyps normalerweise nicht die Standardeinstellung ist. Dies geschieht mit Cookies (die im Gegensatz zu Javascript auf der Serverseite mit PHP verwaltet werden).

Schauen Sie sich unbedingt den Download-Link im Artikel an, um Beispiele zu finden.

Ich hoffe dir gefällt es!

MobileESP verfügt über PHP-, Java-, APS.NET- (C #), Ruby- und JavaScript-Hooks. Es hat auch die Apache 2-Lizenz, die für die kommerzielle Nutzung kostenlos ist. Das Wichtigste für mich ist, dass es nur Browser und Plattformen identifiziert, nicht Bildschirmgrößen und andere Metriken, was es schön klein hält.

Es gibt eine brandneue Lösung mit Zend Framework. Beginnen Sie mit dem Link zu Zend_HTTP_UserAgent:

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