Cum să detectezi dispozitivele mobile și să prezinți un design specific?

Ca și majoritatea, recomand cu căldură utilizarea WPTouch. Cu toate acestea, acesta este conceput mai mult pentru a sprijini bloguri decât alte formate de site-uri web, așa că știu că nu este panaceul soluțiilor mobile (eu îmi rulez portofoliul pe WordPress, la fel ca și blogul meu, iar portofoliul meu arată ca **** în WPTouch).

Așadar, am analizat codul pentru a găsi părțile relevante pe care ar trebui să le folosești pentru a replica detectarea browserului mobil. În primul rând, așa cum a menționat Jan Fabry, este o listă de agenți de utilizator pentru browsere mobile. WPTouch include o listă implicită, dar, de asemenea, îți permite să adaugi agenți de utilizator personalizați printr-o setare sau cu un filtru numit 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",                             // Alt browser iPhone
        "webmate",                               // Alt 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 );

    // Filtru WPtouch pentru Agenți de Utilizator
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

Totuși, esența plugin-ului este o clasă:

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

    ...

Constructorul plugin-ului (function WPtouchPlugin()) adaugă mai întâi o acțiune la hook-ul plugins_loaded pentru a detecta agentul de utilizator al browserului mobil și a seta $applemobile pe true. Iată funcția specifică:

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

Acum plugin-ul știe că folosești un browser mobil (conform agentului de utilizator al browserului). Următoarea parte importantă a plugin-ului este un set de filtre:

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

Fiecare dintre aceste filtre apelează o metodă care verifică dacă $applemoble este setat pe true. Dacă da, atunci WordPress va folosi fișierul tău de stiluri pentru mobile, tema ta pentru mobile și un șablon de post/pagină pentru mobile în locul celor implicite pentru tema ta. Practic, suprascrii comportamentul implicit al WordPress pe baza faptului dacă browserul folosit are un agent de utilizator care se potrivește cu lista ta de "browsere mobile".

WPTouch include, de asemenea, posibilitatea de a dezactiva tema mobilă - când vizitezi un site WPTouch pe un iPhone, există un buton în partea de jos care îți permite să vizualizezi site-ul în mod normal. Ai putea să iei în considerare acest lucru în timp ce îți construiești propria soluție.

Declinare de răspundere: Tot codul de mai sus a fost copiat din sursa WPTouch versiunea 1.9.19.4 și este protejat sub licența GPL. Dacă refolosești codul, sistemul tău trebuie să respecte, de asemenea, termenii GPL. Nu am scris acest cod.

Poate ai vrea să te uiți la modul în care foarte popularul plugin WPtouch realizează acest lucru. Acesta oferă o temă diferită pentru "dispozitive mobile iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch și BlackBerry Storm/Torch". Văd o listă de agenți utilizator în codul lor sursă, probabil acesta este cheia.

Un alt plugin, WP-Wurfled, folosește extinsa bază de date Wireless Universal Resource File. Această bază de date actualizată constant a dispozitivelor mobile conține și multe informații despre capabilități, astfel încât să știi din partea serverului rezoluția ecranului dispozitivului, dacă acceptă Flash, ...

template_redirect action hook este adesea folosit pentru a încărca teme personalizate, deoarece este aproape ultimul moment înainte ca un fișier șablon real să fie inclus (template_include este ultimul hook, dar acesta este un filtru).

Cu riscul de a nu răspunde la întrebare, aș sfătui să nu faci asta.

Am folosit dispozitive iOS timp de luni, iar unul dintre primele lucruri pe care le-am făcut când mi-am cumpărat iPad-ul a fost să încerc să creez un layout CSS care să își schimbe comportamentul în funcție de dispozitivul folosit (și, inițial, de orientarea ecranului).

La momentul scrierii, rulează pe site-ul meu de dezvoltare (http://dev.semiologic.com/). Dacă îl testezi pe un dispozitiv iOS, vei observa că layout-ul trece de la o coloană cu bare laterale pe iPad, la unul cu o singură coloană pentru iPhone. (Barele laterale sunt aranjate în două coloane, iar cutiile din partea de jos sunt aranjate în două coloane dedesubt.) Poți reproduce efectul folosind Safari, reducând lățimea browserului.

Oricât de distractiv a fost să programez acest lucru, în cele din urmă mi-am dat seama că, cel puțin pe dispozitivele iOS, layout-ul optimizat pentru mobil a făcut lucrurile mai rele, nu mai bune. Zoom-ul integrat al Safari mobile este atât de bun încât, atâta timp cât coloana ta principală are 480px lățime, site-ul tău este deja optimizat pentru utilizarea pe mobil. Adaugă o bară laterală de 240px lățime pentru un layout de 720px lățime, iar site-ul tău se va potrivi și va arăta grozav în toate:

• 1024x768 (iPad landscape)
• 768x1024 (iPad portrait)
• 800x600 (utilizatori cu probleme de vedere)
• 480x320 (iPhone landscape)
• 320x480 (iPhone portrait, cu zoom-ul automat activat)

500px + 250px funcționează de asemenea dacă preferi ceva care totalizează 750px, ținând cont de zoom-ul integrat al Safari mobile. Site-ul va arăta în continuare bine și va fi perfect lizibil pe iPhone-uri în ambele moduri, landscape și portrait.

În orice caz, revenind la întrebarea ta, testele au relevat că singurul lucru pe care NU ar trebui să-l faci este să folosești un layout cu lățime flexibilă. (Întâmplător, WP-touch va face exact asta, dacă nu mă înșel.) Acest lucru duce la un zoom sub-optimal. Pe iPad, poți face zoom pe ceva constrâns într-o coloană de 480px lățime, permițând o dimensiune mai mare a textului; ceva care se "ajustează" la lățimea ecranului te forțează să citești text mic sau să faci scroll orizontal dacă este prea mic pentru a fi citit confortabil...

Simplu: Folosește funcția wp_is_mobile() pentru a testa - va returna true pentru toate dispozitivele mobile (smartphone-uri, tablete, etc.).

Actualizare

Nu face asta. Nu funcționează în mod fiabil.

Acesta este un script foarte bun dacă doriți să-l personalizați, ușor de integrat în WordPress. http://detectmobilebrowsers.mobi/

Un lucru important de reținut este că majoritatea utilizatorilor de iPhone, Android sau telefoane mobile cu suport pentru browser nativ nu doresc să fie redirecționați automat!

Aceasta este o practică proastă – oferiți-le o opțiune prin intermediul unui link către versiunea mobilă, iar în versiunea mobilă, oferiți-le posibilitatea de a reveni la site-ul original.

Repet, nu redirecționați automat utilizatorii decât dacă construiți ceva foarte specific pentru mobile sau aveți trafic de la telefoane vechi fără suport pentru browser nativ (puțin probabil).

• Am vrut să adaug că o modalitate ușoară de a vedea cât de important este acest lucru este prin logurile serverului.

Voi adăuga o abordare alternativă.

Poate doriți să personalizați manual și să ajustați toate stilurile și comportamentele în funcție de nevoi foarte specifice.

Recent am avut nevoie să: dacă e IE9 să fac un lucru, dacă e iPhone altul, dacă iPad un al treilea și așa mai departe... Și am folosit clasa Browser.php a lui Chris Schuld cu rezultate excelente.

Funcția pe care am creat-o și exemple de utilizare:

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

if ( browser_check('ie') ) echo "Folosești Internet Explorer - afișează CSS corespunzător";

if ( browser_check('mobile') ) echo "Folosești iPhone, iPod sau Android - afișează JAVASCRIPT corespunzător";

if ( browser_check('ipad') ) echo "Folosești iPad - afișează PHP corespunzător";