Diseñar Páginas web para Iphone

El futuro del diseño web pasan por los dispositivos moviles, las estadísticas están ahí, un millón de dispositivos vendidos el primer fin de semana que salió el Iphone, en 2009 fueron vendidos alrededor de 45 millones de dispositivos, lo que querría decir que todos los españoles tendrían un iphone…

Debemos saber ciertas reglas cuando diseñamos para iphones, como que no se visualizan los elementos flash, disponemos de una resolución menor, el tamaño de imágenes no puede pasar de un tamaño específico, 320×480px. Las tipografías soportadas son American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica Neue, Marker Felt, Times New Roman, Trebuchet MS, Verdana y Zapfino.

Estas son solo algunas de las cuestiones básicas que os enseñaremos.

CARGAR CSS O WEB DISEÑADA ESPECÍFICAMENTE PARA IPHONE

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();
}

DEFINIR LA ESCALA DE VISUALIZACIÓN DE LA PÁGINA WEB
Cuando entramos en una web desde nuestro iphone y la vemos en pequeñito,es debido a que el desarrollador no ha insertado el código que indica el ancho de pantalla (width=device-width).

AÑADIR UN ICONO PERSONALIZADO DE LA PÁGINA WEB EN EL ESCRITORIO DEL IPHONE

Si lo que necesitamos es añadir un icono a la web, para que cualquier usuario la pueda agregar a favoritos en su dispositivo movil, tan solo tendremos que crear una imagen de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:

<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 si lo que queremos es desactivar esta función tendremos que añadir las siguiente lineas en nuestra css.

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

APLICAR CSS ESPECIFICOS PARA EL IPHONE

Si lo que queremos es que se apliquen ciertos estilos solamente cuando se esté visualizando en un iphone, aplicando 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

Otro dato que tenemos que tener en cuenta cuando diseñamos páginas web para iphone es el tamaño de las mismas, ya que en este dispositivo móvil 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 en la pantalla

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

FUNCIONES EXCLUSIVAS PARA IPHONE: LLAMAR Y MANDAR SMS
Uno de mis grandes descrubimientos han sido estas dos funciones ya que son específicas para usar en dispositivos móviles, y nos servirán para llamar directamente al pulsar o enviar un sms

Llámame

Mándame un SMS

APLICAR CSS SEGUN ESTE EN VERTICAL O HORIZONTAL
Con este script conseguiremos aplicar un css especifica según se esté visualizando horizontal o verticalmente.

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);
}

DESACTIVAR BARRA DE TAREAS EN SAFARI

window.addEventListener('load', function() {
	setTimeout(scrollTo, 0, 0, 1);
}, false);

ESTILO LINKS HOVER EN IPHONE

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i <myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

a:hover, a.hover {
	/* el efecto hover que sea*/
}