e-mail: jorestes@gmail.com Movil: 985384198

Orienta tus sitios webs para visitas desde iPhone ipod touch

Algunos tips muy últiles para orientar nuestros sitios webs a visitas de iPhones e iPodtouch.
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"/>

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>

Visto en Linux hispano fuente: CatsWhoCode.

Related Posts with Thumbnails

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType