10 Scripts para Aplicaciones Web iPhone

Al desarrollar un sitio Web siempre pensamos en la compatibilidad de navegadores, en esta nueva era también pensamos en compatibilidad con los dispositivos móviles como el iPhone. Este artículo tiene 10 scripts muy útiles para el desarrollo en esta plataforma, son códigos PHP, JavaScript y CSS.
Si quieres testear o crear aplicaciones para iPhone en una PC, puedes utilizar MobiOne, es un programa que te permite amular el iPhone casi a la perfección.

1. Detectar iPhone

Estas funciones para detectar si el navegador Web es del iPhone nos servirán para escoger el tipo de respuesta que enviaremos al usuario, por ejemplo podemos redireccionar a un subdominio donde todo este preparado para plataforma Web, o simplemente podemos cambiar de estilos al detectar el navegador móvil, dependiendo de nuestro nivel de acceso al servidor podemos utilizar los siguientes Scripts.
Detectar iPhone con .htaccess

RewriteEngine on
RewriteCond ${HTTP_USER_AGENT} iPhone
RewriteRule .* http://m.tednologia.com

Detectar iPhone con PHP

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

Detectar iPhone con 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";
    }
}

2. Establecer el ancho de la página para iPhone con el Meta “viewport”

Este Meta es algo tan simple pero muy importante para establecer nuestra página exactamente a la anchura del iPhone.

<meta  name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"  />

3. Icono para el iPhone

Al guardar una página en pantalla principal del iPhone, generalmente nos proporciona una vista en miniatura para su acceso directo, pero podemos personalizar esto mediante un tag en la cabecera donde llamara a una imagen específica, esta deberá ser .png y en la medida 57px por 57px, el iPhone se encarga de los bordes redondeados y el brillo automáticamente.

<rel="apple-touch-icon" href="http://domain.com/images/icon-iphone.png"/>

4. Prevenir que el iPhone ajuste el tamaño de texto al rotar.

Al girar el iPhone, Safari por defecto ajusta el tamaño de text. En algunos casos preferimos que esto no pase, por lo cual este Meta nos ayudara a controlarlo.

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

5. Detectar la orientación del iPhone

Si tenemos necesidad de detectar una pagina, podemos hacerlo mediante este script que agregara una clase diferente según la orientación.

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

6. Aplicar CSS específicamente para iPhones y iPods

Si quieres aplicar CSS únicamente a dispositivos iPhone o iPod touch, puedes utilizar el siguiente código, todo lo que pongas dentro de las llaves se verán solo en tales dispositivos

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

7. Redimensionar automáticamente las imágenes en el iPhone

Una manera de aprovechar el código anterior es redimensionando las imágenes al estar navegando por iPhone, ya que las imágenes por defecto sobrepasan los 480px en los navegadores, este código hará que se no sobrepasen tal cantidad.

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

8. Ocultar la barra de herramientas por defecto

El siguiente código JavaScript ocultara la barra de herramientas que muestra por defecto Safari de iPhone.

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

9. Hacer uso de los enlaces especiales

Estos enlaces especiales servirán el los iPhone como un atajo a los programas cliente para hacer llamadas a otros teléfonos y enviar SMS al numero especificado.

Call me
Send me a text

10. Simular la pseudo clase :hover

Como nadie utiliza un mouse dentro del iPhone, la propiedad :hove para los enlaces se deshabilito, con algo de JavaScript y CSS podemos habilitarlo y este funcionada cuando nuestro dedo pase sobre los enlaces.

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

Post Original: CatsWhoCode.com