Browser o Mobile Browser?

Il nostro sito Web ormai non è visualizzato solo da postazioni PC. Con la diffusione del mobile, grazie soprattutto ad Apple iPhone, l’accesso al sito o blog viene sempre più spesso effettuato da dispositivi mobili di vario tipo. Diventa quindi esigenza di molti Web Developer saper intercettare ed identificare i diversi “agenti”, cioè gli strumenti con cui un utente visualizza (naviga) le nostre pagine.
Per WordPress, ad esempio, che rappresenta una delle piattaforme Blog più diffuse, esistono da tempo Plugin che permettono di visualizzare in modo differente il nostro Blog in base al “device” che si utilizza. Questi Plugin non fanno altro che intercettare il tipo di dispositivo usato e re-indirizzare un tema appropriato. Chi possiede un Apple iPhone avrà infatti notato che alcuni Blog vengono visualizzati in modo totalmente differente, proprio grazie al cambio del tema effettuato da questi Plugin.
La procedura, tuttavia, può essere generalizzata e applicata a qualsiasi pagina Web. Sfruttando PHP è possibile identificare l’agente e decidere che tipo di output emettere:

1
2
3
4
5
6
7
<?php
    // fornisce le informazioni sull'agente che ha richiesto
    // questa pagina
    echo $_SERVER['HTTP_USER_AGENT'];
    // l'output sarà tipo:
    // Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; it; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5
?>

Analizzando la stringa contenuta in $_SERVER['HTTP_USER_AGENT'] è possibile identificare l’agente e comportarsi di conseguenza. Se ad esempio avete la necessità di mostrare un contenuto con un layout differente agli utenti Apple iPhone, potete inserire queste righe di codice nella vostra pagina PHP:

1
2
3
4
5
6
7
<?php
if( eregi('iphone', $_SERVER['HTTP_USER_AGENT']) ) {
    // Apple iPhone
} else {
    // Tutti gli altri
}
?>

Le combinazioni sono varie e, senza impazzire più di tanto, consiglio di scaricare questa piccola libreria (che poi non è nemmeno una libreria) scritta da Andy Moore: mobile_device_detect.php.
Il suo uso è davvero semplice e permette di intercettare moltissimi device: Apple iPhone/iPod, Android, Palm, …
Per utilizzarla basta includere il file mobile_device_detect.php e controllare il rotorno della funzione mobile_device_detect():

1
2
3
// ...
require_once ('mobile_device_detect.php');
$mobile = mobile_device_detect();

La funzione accetta otto (8) parametri (opzionali) in ingresso che ne determinano il comportamento, compreso un re-direct nel caso sia stato trovato il device specificato nei parametri d’ingresso. Sul sito è disponibile anche un comodo “generatore” di funzione che chiarisce il funzionamento.

4 commenti a: “Browser o Mobile Browser?”

  1. 11 dic, 2009 Giacomo Ratta:

    Wow… ottimo script!
    Secondo me è indispensabile per realizzare siti per dispositivi mobili, perché, se con i diversi browser per pc potevamo risolvere tutto con dei css diversi con i dispositivi mobili spesso è necessario mettere mano anche all’html!

    Ne approfitto per segnalarti che nel feed, in particolare in Google Reader, non vengono supportati i (maledetti) caratteri accentati: Screenshot

    RispondiQuota
  2. 11 dic, 2009 Giovambattista Fazioli:

    @Giacomo Ratta: grazie per segnalazione! Effettivamente ieri l’avevo notato anch’io, anche se poi su Google Reader mi è tornato misteriosamente a posto. Credo sia una cosa momentanea chissà a cosa dovuta… hai riscontrato problemi anche con post precedenti? Perchè io non ho cambiato nulla?! :D

    RispondiQuota
  3. 11 dic, 2009 Giacomo Ratta:

    @Giovambattista Fazioli: ora è ritornato tutto a posto. Boh! :?

    RispondiQuota
  4. 14 ott, 2010 Very short snippet: detect iPad sul device e sul Web | Undolog.com:

    [...] Web la situazione è simile a quella esposta in Browser o Mobile Browser?, con la variante: 12345if( strpos($_SERVER['HTTP_USER_AGENT'],'iPad') ) [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA