Programando webs para iPhone e iPod Touch

Os dejo una serie de consejos muy útiles para que no tengáis problemas en el desarrollo de sitios web para iPhone. La fuente original en inglés es CatsWhoCode.

Detectar si es iPhone o iPodTouch utilizando 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";
    }
}

Detectar si es iPhone o iPodTouch utilizando PHP

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

Definir la anchura del iPhone como el viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&mt;

Insertar un icono específico para iPhone

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

Prevenir que Safari ajuste automáticamente el tamaño del texto al rotar

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

Detectar la orientación del iPhone

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("page_wrapper").setAttribute("class", contentType);
}

Aplicar estilos CSS sólo a iPhone e iPod

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */}

Cambiar el tamaño de las imágenes para iPhone e iPod automáticamente

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

Esconder la barra de herramientas por defecto

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

Utilizar enlaces de tipo especial

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

Simular: pseudo clase hover

a:hover, a.hover {
    /* whatever your hover effect is */}