it-swarm.com.de

Mobilen Browser automatisch erkennen (über User-Agent?)

Wie kann ich erkennen, ob ein Benutzer meine Website in einem mobilen Webbrowser anzeigt, damit ich die entsprechende Version meiner Website automatisch erkennen und anzeigen kann?

290
TeddyTom

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

Es gibt einige Listenaus bekannte mobile Benutzeragenten, sodass Sie nicht bei Null anfangen müssen. Ich musste eine Datenbank mit bekannten Benutzeragenten erstellen und Unbekannte speichern, wenn sie zur Überarbeitung erkannt wurden, und dann manuell herausfinden, um welche es sich handelt. In manchen Fällen könnte dies zu viel des Guten sein.

Wenn Sie dies auf Apache-Ebene tun möchten, können Sie ein Skript erstellen, das regelmäßig einen Satz von Überschreibungsregeln generiert, die den Benutzeragenten überprüfen (oder einfach 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

b. Anforderungen an http: //domain/index.html an http: //domain/mobil/index.html verschieben

Wenn Sie den Ansatz nicht mögen, ein Skript in regelmäßigen Abständen eine htaccess-Datei neu erstellen zu lassen, können Sie ein Modul schreiben, das den Benutzeragenten überprüft (ich habe keinen bereits erstellten gefunden, fand dies jedoch besonders geeignet Beispiel =) und die Benutzeragenten von einigen Sites auffordern, sie zu aktualisieren. Dann können Sie den Ansatz beliebig verkomplizieren, aber ich denke, in Ihrem Fall wäre der vorherige Ansatz in Ordnung.

91
Vinko Vrsalovic

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

126
Chad Smith

Nur ein Gedanke, aber was ist, wenn Sie dieses Problem aus der entgegengesetzten Richtung gelöst haben? Anstatt festzustellen, welche Browser mobil sind, können Sie auch 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 weiter. Beim Betrachten eines mobilen Browsers gibt es zwei grundlegende Möglichkeiten. Entweder wird Javascript unterstützt oder nicht. Wenn der Browser kein Javascript unterstützt, 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 in Ihr Standardlayout umgeleitet. Dann müssen Sie nur noch feststellen, ob der Benutzer mit deaktiviertem JavaScript mobil ist oder nicht.
Nach Angaben des W3C betrug die Anzahl der Benutzer mit deaktiviertem JavaScript etwa 5%, und die meisten Benutzer haben es deaktiviert, was impliziert, 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? Sie haben diese Benutzer, die die mobile Version Ihrer Website durchsuchen, und das ist eine gute Sache.

33
midsever

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.

31
Ed Poor

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, 1025 fängt jedoch die iPad-Landschaftsansicht ein.

Außerdem möchten Sie Ihrem Kopf das folgende Meta-Tag hinzufügen:

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

Schauen Sie sich diesen Artikel bei HTML5 Rocks an, um einige gute Beispiele zu finden

17
Cory

Mein bevorzugter Mechanismus zur Erkennung mobiler Browser ist WURFL . Es wird regelmäßig aktualisiert und funktioniert mit jeder wichtigen Programmier-/Sprachplattform.

17

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>
13
Jorgesys

Die Browser-Datei 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/

6
mjf

Sie können mobile Clients einfach über navigator.userAgent Erkennen und alternative Skripte 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
    }

    });
5
sohel khalifa

Sie können die User-Agent-Zeichenfolge überprüfen. In JavaScript ist das ganz einfach. Es ist nur eine Eigenschaft des Navigator-Objekts.

var useragent = navigator.userAgent;

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

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 Skript "redirection_mobile.js" zu lesen, das hier auf github gehostet wird https://github.com/sebarmeli/JS-Redirection-Mobile-Site und Sie können mehr Details in einem meiner Artikel hier lesen:

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

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

Dieses Beispiel funktioniert in asp.net

4
shiv

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
}
3
Nigel Horne

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 Voreinstellung für eine Version der Site festlegen können, die normalerweise nicht die Standardeinstellung basierend auf ihrem Browser oder Gerätetyp ist. Dies geschieht mit Cookies (die nicht über Javascript, sondern über PHP auf der Serverseite verwaltet werden).

Lesen Sie unbedingt den Download-Link im Artikel für die Beispiele.

Ich hoffe dir gefällt es!

0
Michael Lynn

Ja, der User-Agent erkennt mobile Browser. Es gibt viele kostenlose Skripte, um dies zu überprüfen. Hier ist ein solcher PHP-Code , der Ihnen hilft, mobile Benutzer auf eine andere Website umzuleiten.

0
Shoban

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

0
rob