Wie die meisten anderen empfehle ich die Verwendung von WPTouch. Es wurde jedoch mehr für die Unterstützung von Blogs als für andere Websiteformate entwickelt, sodass ich weiß, dass es nicht das Allheilmittel für mobile Lösungen ist (ich verwende mein Portfolio sowohl in WordPress als auch in meinem Blog und mein Portfolio sieht aus wie ****in WPTouch).
Also habe ich mir den Code angesehen, um die relevanten Teile zu finden, die Sie zum Replizieren der Erkennung des mobilen Browsers benötigen. Erstens, wie von Jan Fabry erwähnt, handelt es sich um eine Liste von Benutzeragenten für mobile Browser. WPTouch enthält eine Standardliste, aber Sie können auch benutzerdefinierte Benutzeragenten mit einer Einstellung oder mit einem Filter namens hinzufügen 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 Klasse:
class WPtouchPlugin {
var $applemobile;
var $desired_view;
var $output_started;
var $prowl_output;
var $prowl_success;
...
Der Konstruktor ( function WPtouchPlugin()) des Plugins fügt dem plugins_loadedHook zunächst eine Aktion hinzu , um den Benutzeragenten des mobilen Browsers zu erkennen und $applemobileauf true zu setzen. Hier ist die spezifische Funktion:
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 (laut User Agent des Browsers). Der nächste Teil des Plugins besteht aus einer 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 prüft, ob $applemobletrue festgelegt ist oder nicht . Wenn dies der Fall ist, verwendet WordPress Ihr mobiles Stylesheet, Ihr mobiles Design und eine mobile Post- / Seitenvorlage anstelle der Standardvorlagen für Ihr Design. Grundsätzlich setzen Sie das Standardverhalten von WordPress außer Kraft, je nachdem, ob der verwendete Browser über einen Benutzeragenten verfügt, der Ihrer Liste der "mobilen Browser" entspricht.
WPTouch bietet auch die Möglichkeit, das mobile Design zu deaktivieren. Wenn Sie eine WPTouch-Site auf einem iPhone besuchen, befindet sich unten eine Schaltfläche, mit der Sie die Site normal anzeigen können. Sie können dies berücksichtigen, wenn Sie Ihre eigene Lösung erstellen.
Haftungsausschluss: Der gesamte oben genannte Code wurde aus der Quelle für WPTouch Version 1.9.19.4 kopiert und ist unter der GPL geschützt. Wenn Sie den Code wiederverwenden, muss Ihr System auch den Bestimmungen der GPL entsprechen. Ich habe diesen Code nicht geschrieben.
Vielleicht möchten Sie sich ansehen, wie das sehr beliebte WPtouch-Plugin dies macht. Es gibt ein anderes Thema für "iPhone, iPod touch, Android-, Opera Mini-, Palm Pre-, Samsung touch- und BlackBerry Storm / Torch-Mobilgeräte" . Ich sehe eine Liste von Benutzeragenten in ihrem Quellcode , das ist wahrscheinlich der Schlüssel.
Ein weiteres Plugin, WP-Wurfled , verwendet die umfangreiche Wireless Universal Resource File- Datenbank. Diese ständig aktualisierte Datenbank mobiler Geräte enthält auch viele Funktionsinformationen , sodass Sie serverseitig die Bildschirmauflösung des Geräts kennen, ob es Flash unterstützt, ...
Der
template_redirectAktions-Hook wird häufig zum Laden benutzerdefinierter Designs verwendet, da es fast der letzte Moment ist, bevor eine echte Vorlagendatei enthalten ist (diestemplate_includeist der letzte Hook, aber das ist ein Filter).quelle
Auf die Gefahr hin, die Frage nicht zu beantworten, würde ich raten, dies nicht zu tun.
Ich benutze iOS-Geräte seit Monaten und eines der ersten Dinge, die ich getan habe, als ich mein iPad gekauft habe, war, ein CSS-Layout zu entwickeln, das sein Verhalten basierend auf dem verwendeten Gerät (und ursprünglich der Bildschirmausrichtung) änderte ).
Zum Zeitpunkt des Schreibens läuft es auf meiner Entwickler-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 sind 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 Breite des Browsers verringern.
Wie auch immer, so lustig es war zu programmieren, kam mir schließlich der Gedanke, dass zumindest auf iOS-Geräten das für Handys optimierte Layout die Sache nicht besser, sondern schlechter machte. Der in Safari Mobile integrierte Zoom sorgt dafür, 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 jeder Hinsicht gut aus:
500px + 250px funktioniert auch, wenn Sie lieber etwas mit 750px haben möchten, wenn Sie den integrierten Zoom des Safari-Handys berücksichtigen. Die Site sieht immer noch gut aus und ist sowohl im Quer- als auch im Hochformat auf iPhones perfekt lesbar.
Wenn Sie auf Ihre Frage zurückkommen, haben Sie jedenfalls festgestellt, dass Sie NICHT ein Layout mit einer flexiblen Breite verwenden sollten. (Im Übrigen macht WP-touch genau das, es sei denn, ich irre mich.) Dies führt zu suboptimalem Zoomen. Auf dem iPad können Sie eine 480 Pixel breite Spalte vergrößern, um eine größere Textgröße zu erzielen. Etwas, das sich an die Breite Ihres Bildschirms anpasst, zwingt Sie dazu, winzigen Text zu lesen oder horizontal zu scrollen, wenn es zu klein ist, um bequem gelesen zu werden.
quelle
Einfach:
wp_is_mobile()Zum Testen verwenden - es wirdtruefür alle Mobilgeräte (Smartphones, Tablets usw.) ausgelöst .Aktualisieren
Bitte tu das nicht . Es funktioniert nicht zuverlässig.
quelle
Dies ist ein wirklich tolles Skript, wenn Sie es anpassen möchten und es einfach in WordPress zu integrieren ist. http://detectmobilebrowsers.mobi/
Zu beachten ist, dass die meisten iPhone-, Android- oder Mobiltelefonbenutzer mit nativer Browserunterstützung nicht automatisch umgeleitet werden möchten!
Dies ist eine schlechte Praxis. Geben Sie ihnen eine Option über einen Link zu einer mobilen Version UND geben Sie ihnen in der mobilen Version die Option, zur ursprünglichen Site zurückzukehren.
Ich wiederhole, leite deine Benutzer nicht automatisch um, es sei denn, du erstellst etwas ganz Spezielles für Handys, oder du hast Datenverkehr von älteren Handys ohne native Browserunterstützung (unwahrscheinlich).
quelle
Ich werde einen alternativen Ansatz hinzufügen.
Vielleicht möchten Sie den Stil und das Verhalten ganz nach Ihren Wünschen gestalten und optimieren.
Ich musste in letzter Zeit: Wenn IE9 eine Sache ist, wenn iPhone eine zweite, wenn iPad eine dritte und so weiter ... Und ich habe die Browser.php- Klasse von Chris Schuld mit großartigen Ergebnissen verwendet.
Die von mir aufgerufene Funktion und Anwendungsbeispiele:
quelle