Come rilevare i dispositivi mobili e presentare loro un tema specifico?

Come molti altri, consiglio vivamente di utilizzare WPTouch. Tuttavia, è più adatto a supportare blog che altri formati di siti web, quindi so che non è la panacea per le soluzioni mobile (gestisco il mio portfolio su WordPress così come il mio blog, e il mio portfolio sembra **** in WPTouch).

Quindi ho dato un'occhiata al codice per trovare le parti rilevanti che ti servirebbero per replicare il rilevamento del browser mobile. Innanzitutto, come menzionato da Jan Fabry, c'è una lista di user agent dei browser mobile. WPTouch include una lista predefinita, ma permette anche di aggiungere user agent personalizzati con un'impostazione o con un filtro chiamato 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",                             // Altro browser iPhone
        "webmate",                               // Altro browser iPhone
        "s8000",                                 // Browser Samsung Dolphin
        "bada"                                   // Browser Samsung Dolphin
    );

    $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 );

    // Filtro User Agent di WPtouch
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

Tuttavia, il cuore del plugin è una classe:

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

    ...

Il costruttore del plugin (function WPtouchPlugin()) aggiunge prima un'azione all'hook plugins_loaded per rilevare l'user agent del browser mobile e impostare $applemobile su true. Ecco la funzione specifica:

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

Ora il plugin sa che stai utilizzando un browser mobile (in base all'user agent del browser). La parte successiva del plugin è un insieme di filtri:

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

Ognuno di questi filtri chiama un metodo che verifica se $applemoble è impostato su true. Se lo è, WordPress utilizzerà il tuo foglio di stile mobile, il tuo tema mobile e un template di post/pagina mobile invece di quelli predefiniti del tuo tema. In pratica, stai sovrascrivendo il comportamento predefinito di WordPress in base al fatto che il browser utilizzato abbia un user agent che corrisponde alla tua lista di "browser mobile".

WPTouch include anche la possibilità di disattivare il tema mobile - quando visiti un sito WPTouch su un iPhone, c'è un pulsante in fondo che ti permette di visualizzare il sito normalmente. Potresti voler considerare questo aspetto mentre costruisci la tua soluzione.

Disclaimer: Tutto il codice sopra è stato copiato dal sorgente di WPTouch versione 1.9.19.4 ed è protetto dalla GPL. Se riutilizzi il codice, il tuo sistema deve anche conformarsi ai termini della GPL. Non ho scritto questo codice.

Potresti voler dare un'occhiata a come il popolarissimo plugin WPtouch gestisce questa funzionalità. Offre un tema diverso per "dispositivi mobili iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch e BlackBerry Storm/Torch". Ho visto una lista di user agent nel loro codice sorgente, che probabilmente è la chiave.

Un altro plugin, WP-Wurfled, utilizza l'ampio database Wireless Universal Resource File. Questo database costantemente aggiornato di dispositivi mobili contiene anche molte informazioni sulle capacità, così da conoscere lato server la risoluzione dello schermo del dispositivo, se supporta Flash, ...

L'template_redirect action hook viene spesso utilizzato per caricare temi personalizzati, essendo quasi l'ultimo momento prima che venga incluso un vero file di template (template_include è l'ultimo hook, ma è un filtro).

A rischio di non rispondere alla domanda, ti consiglierei di non farlo.

Ho utilizzato dispositivi iOS per mesi e una delle prime cose che ho fatto quando ho comprato il mio iPad è stato cercare di creare un layout CSS che cambiasse comportamento in base al dispositivo utilizzato (e, originariamente, all'orientamento dello schermo).

Al momento della scrittura, è attivo sul mio sito di sviluppo (http://dev.semiologic.com/). Se lo provi su un dispositivo iOS, noterai che il layout passa da una colonna con sidebar sull'iPad a una con una singola colonna sull'iPhone. (Le sidebar vengono disposte su due colonne e i riquadri inferiori sono organizzati su due colonne sotto.) Puoi riprodurre l'effetto usando Safari, riducendo la larghezza del browser.

Comunque, per quanto divertente fosse programmarlo, alla fine mi è venuto in mente che, almeno sui dispositivi iOS, il layout ottimizzato per mobile peggiorava le cose, non le migliorava. Lo zoom integrato di Safari mobile è tale che, fintanto che la tua colonna principale è larga 480px, il tuo sito è già ottimizzato per l'uso mobile. Aggiungi una sidebar larga 240px per un layout di 720px e il tuo sito si adatta e appare benissimo in tutte queste situazioni:

• 1024x768 (iPad in orizzontale)
• 768x1024 (iPad in verticale)
• 800x600 (utenti con problemi di vista)
• 480x320 (iPhone in orizzontale)
• 320x480 (iPhone in verticale, con lo zoom automatico che si attiva)

500px + 250px funziona anche se preferisci qualcosa che totalizzi 750px, tenendo conto dello zoom integrato di Safari mobile. Il sito apparirà comunque benissimo e perfettamente leggibile sugli iPhone sia in modalità orizzontale che verticale.

In ogni caso, tornando alla tua domanda, i test hanno rivelato che l'unica cosa che NON dovresti fare è utilizzare un layout con larghezza flessibile. (Per inciso, WP-touch farà esattamente questo, a meno che non mi sbagli.) Farlo porta a uno zoom non ottimale. Sull'iPad, puoi ingrandire qualcosa contenuto in una colonna larga 480px, permettendo una dimensione del testo più grande; qualcosa che si "adatta" alla larghezza dello schermo ti costringe a leggere testi minuscoli o a scorrere orizzontalmente se sono troppo piccoli per una lettura confortevole...

Semplice: Usa la funzione wp_is_mobile() per verificare - restituirà true per tutti i dispositivi mobili (smartphone, tablet, ecc.).

Aggiornamento

Per favore non farlo. Non funziona in modo affidabile.

Questo è uno script davvero ottimo se vuoi personalizzarlo, facile da integrare in WordPress. http://detectmobilebrowsers.mobi/

Una cosa da notare è che la maggior parte degli utenti di iPhone, Android o telefoni mobile con browser nativo non vogliono essere reindirizzati automaticamente!

Questa è una cattiva pratica, dagli un'opzione tramite un link alla versione mobile E nella versione mobile dagli la possibilità di tornare al sito originale.

Ripeto, non reindirizzare automaticamente i tuoi utenti a meno che tu non stia costruendo qualcosa di molto specifico per mobile, o non abbia traffico da telefoni più vecchi senza supporto per browser nativo (improbabile).

• Volevo aggiungere che un modo semplice per capire quanto questo sia importante è attraverso i log del tuo server.

Aggiungo un approccio alternativo.

Forse vuoi personalizzare e affinare manualmente tutti gli stili e i comportamenti secondo esigenze molto specifiche.

Recentemente ho avuto bisogno di: fare una cosa per IE9, un'altra per iPhone, una terza per iPad e così via... E ho utilizzato la classe Browser.php di Chris Schuld con ottimi risultati.

La funzione che ho creato e gli esempi di utilizzo:

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 "Versione Browser: " . browser_check('version');

if ( browser_check('ie') ) echo "Stai usando Internet Explorer - carica il CSS appropriato";

if ( browser_check('mobile') ) echo "Stai usando iPhone, iPod o Android - carica il JAVASCRIPT appropriato";

if ( browser_check('ipad') ) echo "Stai usando iPad - carica il PHP appropriato";