Consejos para adaptar una web al iPhone

Reproducimos una entrada del blog de NetConsulting en el cual dábamos consejos para la adaptación de páginas web a dispositivos móviles (especialmente a iPhone) y que son muy intersantes, por lo que los queremos compartir también aquí.

Cada día está más de moda realizar páginas web adaptadas a dispositivos móviles, ofreciendo al usuario menos información y solo información útil en un dispositivo móvil (además de la opción de ver la web completa).

El código para que detecte que la página se está viendo desde un Iphone es el siguiente, se podría hacer bien que cargue una css específica o bien que cargue una web con programación específica para el dispositivo móvil.

Mediante Javascript:

if((navigator.userAgent.match(/Iphone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf(«Iphone_redirect=false») == -1) {
window.location = http://m.espn.go.com/wireless/?Iphone&i=COMR;
}
}

Mediante PHP:

if(strstr($_SERVER[‘HTTP_USER_AGENT’],’Iphone’) || strstr($_SERVER[‘HTTP_USER_AGENT’],’iPod’)) {
header(‘Location: http://yoursite.com/Iphone’);
exit();
}

 

Añadir un icono personalizado de la página web en el escritorio del Iphone. Tendremos que crear una imagen de 57px por 57px en formato .png, sin brillos o esquinas ya que el Iphone las añade automáticamente e insertarla en el encabezado de la web con:

<rel=»apple-touch-icon» href=»images/template/engage.png»/>

  

Desactivar autoajuste de texto al rotar en Safari. Cuando giramos el Iphone, Safari por defecto autoajusta el tamaño del texto. Para desactivar esta función tendremos que añadir las siguiente líneas en nuestra css:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}

 

Aplicar CSS específicos para el Iphone. Si queremos que se apliquen ciertos estilos solo cuando se esté visualizando en un Iphone, tendremos que incluir el siguiente código:

@media screen and (max-device-width: 480px){
/* Todo el CSS para Iphone va aqui */
}

 

Redimensionar imágenes al ancho de pantalla del Iphone. El ancho máximo es de 480px por lo que si es más grande se saldrá de la pantalla. Con el siguiente código conseguiremos que se queden encajadas.

@media screen and (max-device-width: 480px){
img{
max-width:100%;-
height:auto;
}
}

 

Aplicar CSS según la posición. Para ajustar la página a la posición que tengamos el Iphone, bien sea horizontal o vertical, podemos aplicar este script:

window.onload = function initialLoad() {
updateOrientation();
}
function updateOrientation(){
var contentType = «show_»;
switch(window.orientation){
case 0:
contentType += «normal»;
break;
case -90:
contentType += «right»;
break;
case 90:
contentType += «left»;
break;
case 180:
contentType += «flipped»;
break;
}
document.getElementById(«div_identificativo»).setAttribute(«class», contentType);
}

 

Cada día surgen nuevas aplicaciones que permiten a los diseñadores mayor libertad de expresión en sus creaciones. Esperamos que estos consejos te hayan servido de ayuda.