Tutorialdock | Free Web Resources

Browser Detection con PHP, jQuery e WordPress

| di:

chrome firefox safari.ie  Browser Detection con PHP, jQuery e Wordpress

Mentre si sviluppa un sito web può essere necessario dover capire con quale browser l’utente sta visitando una determinata pagina per evitare problemi di compatibilità ed attivare un determinato foglio di stile (CSS) se necessario.

Naturalmente, il più delle volte, la necessità di attuare questa contromisura è dettata dai problemi di compatibilità di Internet Explorer: tuttavia, in particolari situazioni, può essere utile per identificare un numero maggiore di browser.

Browser detection con PHP

Il metodo è uno dei più macchinosi ma funziona perfettamente. E’ necessario andare a modificare il file “browscap.ini” all’interno del nostro server php ed inserire questo frammento di codice in un file .php:

>?php
echo " "; print_r(get_browser()); echo " "; ?>

JQuery browser detection

E’ un plugin jQuery, browserdetect.js, appositamente creato per identificare i browser attualmente più diffusi come Safari, Firefox, Chrome, IE e Opera.

L’unica cosa da fare è includere nell’head della nostra pagina browserdetect.js: automaticamente inserirà una classe css al tag body con cui poter personalizzare lo stile della pagina.

Se si tratta di Opera il risultato sarà:

<body class="browserOpera">

WordPress browser detection

Questo codice, una volta inserito nel file functions.php di un qualsiasi tema WordPress, permetterà di identificare con quale browser sta navigando il nostro visitatore e aggiungerà automaticamente una classe CSS al <body> di ogni pagina del blog.

La funzione che permette di identificare il browser non sta in questo file ma è nativa in WordPress.

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

In questo modo a seconda delle necessità, sarà possibile attivare un certo foglio di stile piuttosto che un’altro come ad esempio:

a {
    color: blue;
    text-decoration: underline;
}
.gecko a {
    color: red;
    text-decoration: underline;
}

 

Tags:


Tips: abilitare Airdrop sui mac non supportati ufficialmente