Artículo

---

2 ¡votar!

Scripts para hacer compatible nuestra web con iPhone

Cuando alguien se pone a desarrollar un sitio web, siempre intenta que sea compatible con todos los navegadores que hay en el mercado, o al menos con la mayoría. Con el iPhone pasa exactamente igual, hay que tenerlo presente para que sea totalmente compatible y se pueda navegar por medio de este dispositivo sin problemas por todo el sitio web.


Detectar iPhone


Os mostramos varias formas de saber si el navegador que nos está visitando es un iPhone o no. Esto  nos puede servir, por ejemplo, si tenemos una versión desarrollada exclusivamente para iPhone en un subdominio, poder redirigirlo hacia ese subdominio.


Detectarlo mediante .htaccess

RewriteEngine on
RewriteCond ${HTTP_USER_AGENT} iPhone
RewriteRule .* http://m.craftyman.net

Detectarlo mediante PHP

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

Detectarlo 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";
}
}

Establecer el ancho de página


Con este código lo que podremos hacer será ajustar el ancho de la web, al tamaño del iPhone. Para ello utilizaremos el meta viewport. El código sería el siguiente:

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

Cambiar icono para el iPhone


Cuando con el iPhone se guarda una página en la pantalla principal, este nos proporciona una captura en miniatura para su acceso directo. Pues bien, esta imagen la podemos cambiar y poner una imagen específica que nosotros querramos. Esta imagen tiene que estar en .png y cuya medida sea 57 x 57px.

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

Evitar que iPhone cambie el tamaño del texto al rotar


Cuando rotamos el iPhone, su navegador de forma automática ajusta el tamaño del texto. Puede ser que por lo que sea, alguna vez no nos interese que pase eso. Esto lo podemos controlar de forma sencilla con el siguiente código:

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

Detectar orientación página


Con iPhone podemos ver la página tanto en horizontal como en vertical, por lo que habrá veces que nos interese detectar en que modo lo estamos viendo. Con este código lo podremos hacer, y asignarle una hoja de stylos según el modo en el que estemos.

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

Aplicar CSS específicamente para iPhones y iPods


Si queremos que páginas que sean visualizadas en Iphones o iPods tengan unos estilos específicos, podemos utilizar el siguiente código. Todo lo que se ponga entre las llaves, solo se verán en ese dispositivo.

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

Redimensionar las imágenes en el iPhone


El código que hemos puesto en el punto anterior, podemos utilizarlo para evitar que las imágenes sobrepasen el tamaño indicado del dispositivo. En el ejemplo evitaría que sobrepasara los 480 px.

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

Ocultar la barra de herramientas


Con este código, podremos ocultar la barra de herramientas que muestra el Safari de iPhone.

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

Hacer uso de los enlaces especiales


Estos enlaces servirán como un atajo a los programas cliente para hacer llamadas y enviar SMS a otros teléfonos.

<a href="tel:12345678900">Llamame</a>
<a href="sms:12345678900">Enviame un SMS</a>

Simular pseudo clase .hover


En iPhone, nadie utiliza el ratón para desplazarse por la pantalla, por lo que la propiedad hover se desactivó para los enlaces, pero podemos conseguir ese efecto cuando nuestro dedo pase por los enlaces con el siguiente código.

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

Esquinas redondeadas


Si tu quieres redondear las esquinas, tu puedes beneficiarte de la propiedad -webkit-border-radius de CSS. De esta forma podremos conseguir un estilo redondeado para Safari y Firefox, y una bonita caja de texto para Explorer y Opera.

.box {  
-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
background: #ddd;  
border: 1px solid #aaa;  
}

Eventos al pulsar


En el iPhone, al no utilizar ratón, los eventos del ratón se han suprimido por eventos de toque. Esos eventos son:

• touchstart
• touchend
• touchmove
• touchcancel

Cuando tu sobrescribes algunos de estos eventos, tu escuchador del evento recibirá un objeto de tipo event. Este objeto tiene algunas propiedades importantes:

• Touches: es una colección  objetos touch. Estos objetos tiene tienen las propiedades pageX y pageY que contienen las coordenadas del objeto dentro de la página.
• TargetTouches: Trabaja como touches, pero solo afecta a un elemento en vez de toda la página.

Veamos un ejemplo de uso

window.addEventListener('load', function() {  
var b = document.getElementById('box'),  
xbox = b.offsetWidth  / 2, // half the box width  
ybox = b.offsetHeight / 2, // half the box height  
bstyle = b.style; // cached access to the style object  
b.addEventListener('touchmove', function(event) {  
event.preventDefault(); // the default behaviour is scrolling  
bstyle.left =  event.targetTouches[0].pageX - xbox + 'px';  
bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px';  
}, false);  
}, false);

Gestos


Cuando hablamos de gestos en iPhone, hablamos de acciones que se realizan con dos dedos, como puede ser el zoom o la rotación. Para controlar esto, disponemos de los eventos de gestos. Estos eventos son:

• gesturestart
• gestureend
• gesturechange

Los escuchadores que gestionan los eventos, reciben un objecto event como parámetro, que tiene las siguientes propiedades:

• event.scale. Tiene el valor de 1 cuando no ha cambiado el valor. Menor de 1 cuando se hace mas pequeño, y mayor que uno, cuando se agranda.
• Event.rotate. Tiene la información del ángulo y grados de rotación.

Vamos a ver un ejemplo donde capturaremos el evento gesturechange y luego cambiaremos el tamaño y ratación de un div.

window.addEventListener('load', function() {  
var b = document.getElementById('box'),  
bstyle = b.style;  
b.addEventListener('gesturechange', function(event) {  
event.preventDefault();  
bstyle.webkitTransform = 'scale(' + event.scale + ') ' +  
'rotate('+ event.rotation + 'deg)';  
}, false);  
}, false);

Vía: craftyman.net y articles.sitepoint.com

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios