Al utilizar responsive design para diseñar sitios web podemos encontrarnos con ciertos problemas a la hora de establecer un ancho y una escala inicial en la meta etiqueta viewport. Por ejemplo, dependiendo de cómo lo hayamos desarrollado, el ‘width’ puede hacer que en el iPhone aparezca un zoom horroroso al cargar la web mientras que en el iPad se verá correctamente.
Para evitar esto, la opción principal es la de detectar el agente de usuario y mostrar un viewport u otro. Tenemos dos opciones: utilizar Javascript o PHP.
Código PHP:
<?php
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'
if ( $isiPad ) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">'
}else{
echo '<meta name="viewport" content="width=700,initial-scale=0.45,maximum-scale=1.0">'
}
?>
Código javascript:
<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null
if(isiPad){
document.write('<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">'
}else{
document.write('<meta name="viewport" content="width=700,initial-scale=0.45,maximum-scale=1.0">'
}
</script>
El código PHP nos será útil cuando no utilicemos un sistema de caché como WordPress Super Caché y las peticiones PHP no sean estáticas. Si las peticiones sí son cacheadas, se debe delegar en el usuario esta comprobación utilizando un código javascript.