A menudo nos encontramos con que no podemos controlar si nos visitan con un iPhone o con iPad y las webs no se acaban de ver bien… Con la llegada de wordpress y sus plugins, hemos encontrado la manera de hacer versiones para dispositivos móviles. Pero la verdad es que es difícil cambiar el aspecto por defecto de estos templares a no ser que sean variaciones dentro del propio plugin.

La verdad es que la estructura no se vería mal en un iPhone si los estilos se adecuasen. Bien pues el siguiente código lo que hace es que en header selecciona un css u otro dependiendo del dispositivo con el que se accede a la página web.

Primero deberemos hacer un archivo que contenga la verdadera función de detección de iPhone e iPad:

<?php
	function getBrowser() {
 
		global $bname;
		global $platform;
		global $device;
		global $version;
 
		$u_agent = $_SERVER['HTTP_USER_AGENT']; 
		$bname = 'Unknown';
		$platform = 'Unknown';
		$device = 'Unknown';
		$version= "";
 
		if (preg_match('/linux/i', $u_agent)) {
			$platform = 'linux';
		}
		elseif (preg_match('/macintosh|mac os x/i', $u_agent)) {
			$platform = 'mac';
		}
		elseif (preg_match('/windows|win32/i', $u_agent)) {
			$platform = 'windows';
		}
 
		if (preg_match('/iPhone/i', $u_agent)) {
			$device = 'iphone';
		}
		elseif (preg_match('/iPad/i', $u_agent)) {
			$device = 'ipad';
		}
		elseif (preg_match('/Android/i', $u_agent)) {
			$device = 'android';
		}else{
			$device = 'other';
		}
 
		if(preg_match('/MSIE/i',$u_agent) && !preg_match('/Opera/i',$u_agent)) 
		{ 
			$bname = 'Internet Explorer'; 
			$ub = "MSIE"; 
		} 
		elseif(preg_match('/Firefox/i',$u_agent)) 
		{ 
			$bname = 'Mozilla Firefox'; 
			$ub = "Firefox"; 
		} 
		elseif(preg_match('/Chrome/i',$u_agent)) 
		{ 
			$bname = 'Google Chrome'; 
			$ub = "Chrome"; 
		} 
		elseif(preg_match('/Safari/i',$u_agent)) 
		{ 
			$bname = 'Apple Safari'; 
			$ub = "Safari"; 
		} 
		elseif(preg_match('/Opera/i',$u_agent)) 
		{ 
			$bname = 'Opera'; 
			$ub = "Opera"; 
		} 
		elseif(preg_match('/Netscape/i',$u_agent)) 
		{ 
			$bname = 'Netscape'; 
			$ub = "Netscape"; 
		} 
 
		$known = array('Version', $ub, 'other');
		$pattern = '#(?<browser>' . join('|', $known) .
		')[/ ]+(?<version>[0-9.|a-zA-Z.]*)#';
		if (!preg_match_all($pattern, $u_agent, $matches)) {
		}
 
		$i = count($matches['browser']);
		if ($i != 1) {
			//we will have two since we are not using 'other' argument yet
			//see if version is before or after the name
			if (strripos($u_agent,"Version") < strripos($u_agent,$ub)){
				$version= $matches['version'][0];
			}
			else {
				$version= $matches['version'][1];
			}
		}
		else {
			$version= $matches['version'][0];
		}
 
		if ($version==null || $version=="") {$version="?";}
 
		return array(
			'userAgent' => $u_agent,
			'name'      => $bname,
			'version'   => $version,
			'platform'  => $platform,
			'device'    => $device,
			'pattern'   => $pattern
		);
	} 
 
	function get_device(){
		$ua = getBrowser();
		return $ua['device'];
	}
?>

A este archivo le llamaremos por ejemplo: browserdetect.php. Seguidamente debemos llamar la función en el header de nuestra web (ya sea una web sencilla en HTML o nuestro header de wordpress, en este caso es para wordpress si fuera con una ruta absoluta tendríamos que reescribir la parte de los «echo»):

<?php
include ‘browserdetect.php';
global $dev;
$dev = get_device();

if($dev == ‘iphone’){
echo ‘<link rel=»StyleSheet» href=»‘;
echo bloginfo(‘stylesheet_directory’);
echo ‘/styles/iphone.css» type=»text/css» media=»screen»/>';
}else if($dev == ‘ipad’){
echo ‘<link rel=»StyleSheet» href=»‘;
echo bloginfo(‘stylesheet_directory’);
echo ‘/styles/ipad.css» type=»text/css» media=»screen»/>';
}else{
echo ‘<link rel=»StyleSheet» href=»‘;
echo bloginfo(‘stylesheet_directory’);
echo ‘/styles/style.css» type=»text/css» media=»screen»/>';
}

?>