Podemos definir cinco tipos de compatibilidad:
* Incompatible
Sitios que no funcionan en el Iphone porque usan Flash, SVG o alguna otra tecnología que MobileSafari no soporta. No pueden ser vistos desde el Iphone, o resultan muy tediosos de leer porque tiene columnas muy anchas.
* Compatible
La mayoría de sitios bien hechos serán compatibles con Iphone. Es decir, que aunque en algunas zonas se necesite hacer zoom para leer la letra pequeña, por lo general sea usable.
* Amigable
Para mejorar la forma en que nuestro site se visualice correctamente en Iphone podemos seguir estas técnicas:
- Establecer el ancho máximo de la página (usando un viewport).
- No usar columnas de mas de 320 píxeles de ancho para una vista en vertical, o 480px para una vista en horizontal.
- Acomodar las columnas en bloques de tamaño apropiado.
- Mejorar algunos estilos y tamaños de letra para Iphone.
- Usar enlaces que Iphone soporte.
* Optimizado
Son sitios que detectan el Iphone según las cabeceras HTTP, enviando un CSS diferente adaptado para Iphone.
El Iphone soporta CSS3 y unas gráficas especiales de Safari 2 y 3, llamadas Canvas.
* Webapp
Es la mejor manera de lograr un sitio amigable para Iphone.
Una Webapp imita la funcionalidad y apariencia de las aplicaciones nativas del Iphone, limitan el tamaño de la página a 320×480px (o 480×320px), hace uso de Canvas, y muchas funciones AJAX.
Con una webapp dedicamos parte del sitio para que sea exclusivamente para Iphone.
Según nuestro sitio web tendremos que valorar qué nos interesa mas, si hacer un sitio amigable para Iphone o una Webapp. Obviamente la Webapp requiere mucho más tiempo y esfuerzo.
Una vez conocidas estas peculiaridades, pasamos a presentarte una serie de consejos y aplicaciones que te pueden ayudar a la hora de ajustar tu site para dispositivos móviles.
Qué interesa mas: cargar un CSS determinado o una 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).
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 móvil, tan solo tendremos que crear una imagen de 57px por 57px en formato .png, sin brillos o esquinas ya que el Iphone las añade automáticamente, con:
<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.
Para desactivar esta función tendremos que añadir las siguiente líneas en nuestra css.
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
Aplicar CSS específicos para el Iphone
Si queremos que se apliquen ciertos estilos solo cuando se esté visualizando en un Iphone, tendremos que incluir 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, 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.
@media screen and (max-device-width: 480px){
img{
max-width:100%;-
height:auto;
}
}
Aplicar CSS según la posición
Aplicar CSS según la posición
Para ajustar la página a la posición que tengamos el Iphone, bien sea horizontal o vertical, podemos aplicar este script
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);
}
Cada día surgen nuevas aplicaciones que permiten a los diseñadores mayor libertad de expresión en sus creaciones. Esperamos que estas aplicaciones te hayan servido de ayuda.
No hay comentarios:
Publicar un comentario