Frage

Wie kann ich erkennen, wenn ein Benutzer von einem mobilen Web-Browser meiner Website anschaut, so dass ich dann automatisch erkannt und die entsprechende Version von meiner Website angezeigt?

War es hilfreich?

Lösung

Ja, den User-Agent-Header liest den Trick.

Es gibt einige Listen aus es von bekannten mobilen User-Agents, so dass Sie brauchen, um von Grund auf nicht zu starten. Was ich tat, als ich hatte, ist eine Datenbank bekannter Benutzeragenten und speichern Unbekannten zu bauen, wie sie für die Revision erkannt werden und dann manuell herauszufinden, was sie sind. Das letzte, was könnte in einigen Fällen zu viel des Guten.

Wenn Sie es auf Apache Ebene tun möchten, können Sie ein Skript erstellen, die in regelmäßigen Abständen eine Reihe von Rewrite-Regeln erzeugt den User-Agent überprüft (oder nur einmal und haben neue Benutzeragenten oder einmal im Monat, was auch immer passt zu Ihrem Fall ), wie

RewriteEngine On

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

, die sich bewegen würde, zum Beispiel Anfragen an http: //domain/index.html http: //domain/mobile/index.html

Wenn Sie nicht den Ansatz wie ein Skript mit in regelmäßigen Abständen eine .htaccess-Datei neu erstellen, können Sie ein Modul schreiben, die den User-Agent überprüft (ich keinen gefunden haben schon gemacht, aber fand diese besonders geeignet Beispiel ) und die User-Agents von einigen Seiten bekommen, um sie zu aktualisieren. Dann können Sie den Ansatz erschweren, so viel wie Sie wollen, aber ich denke, in Ihrem Fall der vorherige Ansatz wäre in Ordnung.

Andere Tipps

Es gibt Open-Source-Skripte auf Mobile Browser erkennen, die dies tun in Apache, ASP, Coldfusion, JavaScript und PHP.

Nur ein Gedanke, aber was ist, wenn Sie dieses Problem aus der entgegengesetzten Richtung gearbeitet? Anstatt mobil sind, welcher Browser bestimmt, warum nicht feststellen, welchen Browser ist nicht wahr? Dann Code Ihrer Website auf die mobile Version auf dem Standard und zur Standard-Version umleiten. Es gibt zwei grundlegende Möglichkeiten, wenn sie bei einem mobilen Browser suchen. Entweder es ist Javascript Unterstützung oder es funktioniert nicht. Also, wenn der Browser wird auf die mobile Version Standard unterstützt kein JavaScript haben. Wenn es JavaScript-Unterstützung verfügt, überprüfen Sie die Bildschirmgröße. Alles, was unter einer bestimmten Größe wird wahrscheinlich auch ein mobiler Browser sein. Alles, was größer wird, um Ihr Standard-Layout umgeleitet. Dann alles, was Sie tun müssen, um festzustellen, ob der Benutzer mit JavaScript deaktiviert mobil ist oder nicht.
Laut dem W3C die Anzahl der Benutzer mit JavaScript deaktiviert war etwa 5% und dieser Benutzer die meisten haben es ausgeschaltet, was bedeutet, dass sie tatsächlich wissen, was sie mit einem Browser tun. Sind sie ein großer Teil des Publikums? Wenn nicht, dann mach dir keine Sorgen über sie. Wenn ja, was ist das Worst-Case-Szenario? Sie haben die Benutzer die mobile Version Ihrer Website surfen, und das ist eine gute Sache.

Hier ist, wie ich es in JavaScript zu tun:

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

Sehen Sie ein Beispiel unter www.tablemaker.net/test/mobile.html wo es verdreifacht die Schriftgröße auf Mobiltelefonen.

Meine Lieblings-Mobile Browser-Erkennung Mechanismus ist WURFL . Es wird häufig aktualisiert, und es funktioniert mit allen wichtigen Programmierung / Sprache-Plattform.

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

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

Sie können die Breite auf, was Sie wollen, aber 1025 wird das iPad Landschaftsansicht fangen.

Sie wollen auch den folgenden Meta-Tag, um Ihren Kopf hinzuzufügen:

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

Sehen Sie sich dieser Artikel auf HTML5 Rocks über für einige gute Beispiele

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>

Der Mobile Device Browser Datei ist eine gute Möglichkeit, mobil (und andere) broswers für ASP.NET-Projekte zu erkennen: http: //mdbf.codeplex.com/

Sie können die mobilen Clients erkennen einfach durch navigator.userAgent und alternative Scripts geladen werden basierend auf dem erfassten Client-Typ wie:

 $(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 prüfen, den User-Agent-String. In JavaScript, das ist einfach, es ist nur eine Eigenschaft des Navigator-Objekts.

var useragent = navigator.userAgent;

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

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

Wenn isIphone wahr ist, dass Sie die Website von einem iPhone zugreifen, wenn isBlackBerry Sie die Website von einem Blackberry zugreifen.

Sie können "Useragent Switcher" Plugin für Firefox, das zu testen.

Wenn Sie auch interessiert sind, kann es sich lohnen, mein Skript Check-out "redirection_mobile.js" auf GitHub hier https://github.com/sebarmeli/JS-Redirection -Mobile-Website und Sie können hier weitere Details in einem meinem Artikel lesen:

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, mobilen Browser zu erkennen. Es gibt viele kostenlose Skripte zur Verfügung, dies zu überprüfen. Hier ist eine solche PHP-Code , die Sie mobile Nutzer zu anderen Website umleiten helfen.

Ich habe diese Demo mit Skripten und Beispiele enthalten zusammen:

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

Dieses Beispiel nutzt PHP-Funktionen für die Erkennung User-Agenten und bietet den zusätzlichen Vorteil Nutzer ermöglicht, eine Präferenz für eine Version der Website angeben, die nicht in der Regel der Standard in ihrem Browser oder Gerätetyp basierte sein würden. Dies wird mit Cookies gemacht (mit PHP auf der Server-Seite gehalten, wie Javascript gegenüber.)

Achten Sie darauf, den Download-Link in dem Artikel für die Beispiele zu überprüfen.

Ich hoffe, Sie genießen!

MobileESP hat PHP, Java, APS.NET (C #), Ruby und JavaScript Haken. es hat auch die Apache 2-Lizenz, so frei für die kommerzielle Nutzung. Schlüssel für mich ist es nur Browser und Plattformen identifiziert Größen und andere Metriken nicht screenen, was es schön ein kleines hält.

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

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top