Wie kann man mobile Geräte erkennen und ihnen ein bestimmtes Thema präsentieren?

Ich möchte eine neue Version meines Themas erstellen (überprüfe mein Profil, falls nötig), um Besuchern zu zeigen, wenn ich feststelle, dass sie die Seite von einem tragbaren Gerät wie iPhone, Android usw. aus besuchen.

  1. Wie erkennt man, ob die Anfrage von einem mobilen Gerät / Browser kommt?
  2. Wie kann ich ein bestimmtes Thema laden und präsentieren?

Mehr Info : Mein Thema ist nicht flüssig. Es hat eine feste Breite von etwa 976px (676px Inhalt + Rest ist linke Seitenleiste). Ich möchte das Thema nicht revolutionieren, aber ich finde es zu groß für 320×480 und 800×480 Handys. Wahrscheinlich werde ich die Seitenleiste entfernen oder zumindest nach rechts verschieben und andere kleine Anpassungen vornehmen.

Solutions Collecting From Web of "Wie kann man mobile Geräte erkennen und ihnen ein bestimmtes Thema präsentieren?"

Wie die meisten anderen, empfehle ich WPTouch. Es ist jedoch mehr auf die Unterstützung von Blogs ausgerichtet als andere Website-Formate, daher weiß ich, dass es nicht das Allheilmittel für mobile Lösungen ist (ich leite mein Portfolio sowohl auf WordPress als auch auf meinem Blog und mein Portfolio sieht wie **** in WPTouch aus).

Daher habe ich mir den Code angesehen, um die relevanten Teile zu finden, die Sie für die Replikation der Erkennung des mobilen Browsers benötigen. Erstens, wie von Jan Fabry erwähnt, ist eine Liste von Mobile Browser User Agents. WPTouch enthält eine Standardliste, aber Sie können auch benutzerdefinierte Benutzeragenten mit einer Einstellung oder einem Filter namens wptouch_user_agents :

 function bnc_wptouch_get_user_agents() { $useragents = array( "iPhone", // Apple iPhone "iPod", // Apple iPod touch "Android", // 1.5+ Android "dream", // Pre 1.5 Android "CUPCAKE", // 1.5+ Android "blackberry9500", // Storm "blackberry9530", // Storm "blackberry9520", // Storm v2 "blackberry9550", // Storm v2 "blackberry9800", // Torch "webOS", // Palm Pre Experimental "incognito", // Other iPhone browser "webmate", // Other iPhone browser "s8000", // Samsung Dolphin browser "bada" // Samsung Dolphin browser ); $settings = bnc_wptouch_get_settings(); if ( isset( $settings['custom-user-agents'] ) ) { foreach( $settings['custom-user-agents'] as $agent ) { if ( !strlen( $agent ) ) continue; $useragents[] = $agent; } } asort( $useragents ); // WPtouch User Agent Filter $useragents = apply_filters( 'wptouch_user_agents', $useragents ); return $useragents; } 

Das Fleisch des Plugins ist jedoch eine class:

 class WPtouchPlugin { var $applemobile; var $desired_view; var $output_started; var $prowl_output; var $prowl_success; ... 

Der Konstruktor des Plugins ( function WPtouchPlugin() ) fügt dem plugins_loaded Hook zuerst eine Aktion plugins_loaded , um den User-Agent des mobilen Browsers zu erkennen und $applemobile auf true zu setzen. Hier ist die spezifische function:

 function detectAppleMobile($query = '') { $container = $_SERVER['HTTP_USER_AGENT']; $this->applemobile = false; $useragents = bnc_wptouch_get_user_agents(); $devfile = compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode'; foreach ( $useragents as $useragent ) { if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) { $this->applemobile = true; } } } 

Jetzt weiß das Plugin, dass Sie einen mobilen Browser verwenden (entsprechend dem User Agent des Browsers). Der nächste fleischige Teil des Plugins ist eine Reihe von Filtern:

 if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) { add_filter( 'stylesheet', array(&$this, 'get_stylesheet') ); add_filter( 'theme_root', array(&$this, 'theme_root') ); add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') ); add_filter( 'template', array(&$this, 'get_template') ); } 

Jeder dieser Filter ruft eine Methode auf, die überprüft, ob $applemoble auf “true” $applemoble ist oder nicht. Wenn dies der Fall ist, verwendet WordPress Ihr mobiles Stylesheet, Ihr mobiles Theme und eine mobile Post / Page-Vorlage anstelle der Standardvorlagen für Ihr Theme. Grundsätzlich überschreiben Sie das Standardverhalten von WordPress, je nachdem, ob der verwendete Browser einen Benutzer-Agent hat, der Ihrer Liste der “mobilen Browser” entspricht.

WPTouch bietet auch die Möglichkeit, das mobile Theme zu deaktivieren – wenn Sie eine WPTouch-Site auf einem iPhone besuchen, gibt es unten eine Schaltfläche, mit der Sie die Site normal anzeigen können. Sie können dies beim Erstellen Ihrer eigenen Lösung berücksichtigen.

Haftungsausschluss: Der gesamte obige Code wurde für WPTouch Version 1.9.19.4 aus der Quelle kopiert und ist unter der GPL geschützt. Wenn Sie den Code erneut verwenden, muss Ihr System auch die Bedingungen der GPL erfüllen. Ich habe diesen Code nicht geschrieben.

Vielleicht möchten Sie sich ansehen, wie das sehr beliebte WPtouch-Plugin dies tut. Es gibt ein anderes Thema für “iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung Touch und BlackBerry Storm / Torch mobile Geräte” . Ich sehe eine Liste von Benutzeragenten in ihrem Quellcode , das ist wahrscheinlich der Schlüssel.

Ein anderes Plugin, WP-Wurled , verwendet die umfangreiche Wireless Resource File- database. Diese ständig aktualisierte database von mobilen Geräten enthält auch viele Fähigkeitsinformationen , so dass Sie serverseitig die Bildschirmauflösung des Geräts kennen, ob es Flash unterstützt, …

Der Aktions-Hook template_redirect wird oft verwendet, um benutzerdefinierte Designs zu laden, da es fast der letzte Moment ist, bevor eine echte Template-Datei enthalten ist ( template_include ist der letzte Hook, aber das ist ein Filter).

Auf die Gefahr hin, die Frage nicht zu beantworten, würde ich raten, dies nicht zu tun.

Ich verwende iOS-Geräte seit Monaten, und eines der ersten Dinge, die ich beim Kauf meines iPads gemacht habe, war ein CSS-Layout, das sein Verhalten basierend auf dem verwendeten Gerät (und ursprünglich der Bildschirmausrichtung) änderte ).

Zum Zeitpunkt des Schreibens läuft es auf meiner Dev-Website (http://dev.semiologic.com/). Wenn Sie es auf einem iOS-Gerät testen, werden Sie feststellen, dass das Layout von einer Spalte mit Seitenleisten auf dem iPad zu einer mit einer einzelnen Spalte auf dem iPhone wechselt. (Die Seitenleisten werden in zwei Spalten angeordnet, und die unteren Felder sind in zwei Spalten darunter angeordnet.) Sie können den Effekt mit Safari reproduzieren, indem Sie die Browserbreite reduzieren.

Wie auch immer, so viel Spaß es beim Programmieren machte, kam mir schließlich in den Sinn, dass zumindest auf iOS-Geräten das für Mobilgeräte optimierte Layout die Situation noch schlimmer machte, nicht besser. Der integrierte Zoom von Safari Mobile ist so ausgelegt, dass Ihre Website bereits für den mobilen Einsatz optimiert ist, solange Ihre Hauptspalte 480 Pixel breit ist. Fügen Sie eine 240 Pixel breite Seitenleiste für ein 720 Pixel breites Layout hinzu, und Ihre Website passt und sieht in allen gut aus:

  • 1024×768 (iPad Landschaft)
  • 768×1024 (iPad Porträt)
  • 800×600 (Benutzer mit Sehschwäche)
  • 480×320 (iPhone Landschaft)
  • 320×480 (iPhone-Porträt, mit automatischem Zoom-Effekt)

500px + 250px funktioniert auch, wenn Sie lieber einen Wert von 750px haben möchten, wenn Sie den integrierten Zoom von Safari mobile berücksichtigen. Die Seite wird immer noch gut aussehen und auf iPhones sowohl im Quer- als auch im Hochformat perfekt lesbar sein.

Wie auch immer, wenn wir auf Ihre Frage zurückkommen, haben Tests ergeben, dass das einzige, was Sie NICHT tun sollten, ein Layout mit einer flexiblen Breite ist. (Übrigens wird WP-touch genau das tun, wenn ich mich nicht irre.) Dies führt zu einem suboptimalen Zoom. Auf dem iPad können Sie etwas vergrößern, das in einer 480-Pixel-breiten Spalte eingeschränkt ist, was eine größere Textgröße ermöglicht. etwas, das sich an die Bildschirmbreite “anpasst”, zwingt Sie, winzigen Text zu lesen, oder horizontales Scrollen, wenn es zu klein ist, um es bequem zu lesen …

Einfach: Verwenden Sie wp_is_mobile() , um zu testen – es wird für alle mobilen Geräte (Smartphones, Tablets usw.) true auslösen.

Aktualisieren

Bitte tu das nicht . Es funktioniert nicht zuverlässig.

Dies ist ein wirklich tolles Skript, wenn Sie es anpassen möchten, einfach in WordPress zu integrieren. http://detectmobilebrowsers.mobi/

Eine Sache zu beachten ist, dass die meisten iPhone, Android oder Handy-Benutzer mit nativer Browser-Unterstützung nicht automatisch umgeleitet werden wollen!

Dies ist eine schlechte Übung, geben Sie ihnen eine Option über einen Link zu einer mobilen Version und in der mobilen Version geben Sie ihnen eine Option, um auf die ursprüngliche Website zurückzukehren.

Ich wiederhole, dass Sie Ihre Nutzer nicht automatisch redirect, es sei denn, Sie haben etwas sehr Spezifisches für Mobilgeräte erstellt oder Sie haben Traffic von älteren Telefonen ohne native Browser-Unterstützung (unwahrscheinlich).

  • Wollte hinzufügen, eine einfache Möglichkeit zu sagen, wie wichtig das ist, ist durch Ihre Server-Protokolle.

Ich füge einen alternativen Ansatz hinzu.

Vielleicht möchten Sie den Stil und das Verhalten nach ganz bestimmten Bedürfnissen kunsthandwerklich gestalten und verfeinern.

Ich musste kürzlich: wenn IE9 eine Sache, wenn iPhone eine zweite, wenn iPad eine dritte und so weiter … Und Chris Schuld Browser.php class mit tollen Ergebnissen verwendet.

Die function kam ich und Verwendungsbeispiele:

 require_once('Browser.php'); $browser_check = new Browser(); $browser_agent = $browser_check->getBrowser(); $browser_version = $browser_check->getVersion(); function browser_check($what) { global $browser_agent, $browser_version; switch ($what) { case 'version': return $browser_version; break; case 'ie': if ($browser_agent==Browser::BROWSER_IE) return true; else return false; break; case 'mobile': if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true; else return false; break; case 'ipad': if ($browser_agent==Browser::BROWSER_IPAD) return true; else return false; break; default: return false; break; } } echo "Browser Version: " . browser_check('version'); if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS"; if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT"; if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";