Diseño web; máxima compatibilidad: anexo

Buenas!

En esta primera entrada del año voy a hacer un pequeño anexo al estilo web.

En la entrada anterior, vimos cómo diferenciar los navegadores mediante CSS; pues bien, también se puede detectar mediante, por ejemplo, PHP.

Dejo una función para determinar qué navegador se está usando, así como si es desde un dispositivo móvil.

function getBrowser($ua){

        $mobile_browser = '0';

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));

$mobile_agents = array('w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac', 'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno', 'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-', 'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-', 'newt','noki','oper','palm','pana','pant','phil','play','port','prox', 'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar', 'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-', 'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp', 'wapr','webc','winw','winw','xda','xda-');

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))){$mobile_browser++;}

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){$mobile_browser++;}

if(in_array($mobile_ua, $mobile_agents)){$mobile_browser++;}

if(strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0){$mobile_browser++;}

if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0){$mobile_browser = 0;}

        if($mobile_browser > 0){return -1;}

if(preg_match('/Chrome/i',$ua)){return 0;}

elseif(preg_match('/MSIE 9.(.+)/i',$ua)){return 1;}

elseif(preg_match('/MSIE 8.(.+)/i',$ua)){return 2;}

elseif(preg_match('/MSIE 7.(.+)/i',$ua)){return 3;}

elseif(preg_match('/Firefox/i',$ua)){return 4;}

elseif(preg_match('/Safari/i',$ua)){return 5;}

elseif(preg_match('/Flock/i',$ua)){return 6;}

elseif(preg_match('/Opera/i',$ua)){return 7;}

elseif(preg_match('/Netscape/i',$ua)){return 8;}

}

Para obtener el valor del navegador, haríamos algo así:

$b = getBrowser($_SERVER['HTTP_USER_AGENT']);

a sabiendas de que:

• if($b < 0) => navegador móvil
• if($b == 0) => chrome
• if($b > 0 and $b < 4) => IE (1 = IE9; 2 = IE8; 3 = IE 7)
• if($b == 4) => firefox
• if($b == 5) => safari
• if($b == 6) => flock
• if($b == 7) => opera
• if($b == 8) => netscape

Con esto podemos modificar los estilos "inline" y "direct" de nuestro HTML.

Espero os sirva, y, como siempre:

¡Hasta la próxima!