Hoy les hablare acerca de como hacer sus sitios web compatibles para dispositivos móviles como lo son el iPhone y la Blackberry, básicamente nos centraremos en la parte del tamaño y el uso de lo que es el Viewport.
La mayoría de sitios web y páginas web se ven bien en Pc , pero muy pocos son compatibles y funcionan bien con el iPhone y la Blackberry.
Sin embargo, es posible hacer que los sitios web sean más accesibles, compatibles y funcionen en dispositivos móviles.
Les mostrare un pequeño tip que les puede servir para visualizar páginas para iPhone y Blackberry.
Recordemos que el tamaño para dispositivos móviles puede variar dependiendo del tipo de dispositivo, las especificaciones del iPhone de Apple incluyen 3,5 pulgadas (en diagonal) Pantalla ancha, con 480 x 320 píxeles de resolución WQVGA. Otros pueden tener una pantalla de solo 2.5 pulgadas, un PDA de 4 pulgadas y Ultra-Mobile PC de 7 pulgadas, con resolución de QVGA (240 x 320 píxeles) a 800 x 480 o mayor para un Ultra-Mobile PC. El diseño de páginas web por lo tanto tiene que ser capaz de adaptarse a las pantallas de diferentes tamaños y forma.
La forma más sencilla para adaptar el contenido de una página para los dispositivos móviles es hacer uso de una simple línea de código, la cual nos dará el soporte para poder visualizar nuestra página ya sea en un iPhone o Blackberry.
Para ello, solo basta con añadir la siguiente línea dentro de las etiquetas <head></head> de nuestra página web:
<meta name=«viewport» content=«width=320» />
Viewport es un formato de modelo visual para los medios de comunicación según la especificación CSS 2.1, se trata de una ventana o área de visualización de otro en la pantalla a través del cual los usuarios pueden consultar un documento (la porción de la pantalla que en realidad estás viendo).
Otros parámetros aplicables para incluir en nuestro viewport están: include initial-scale, user-scalable, minimum-scale and, maximum-scale, donde se puede tratar de hacer encajar su sitio web en el iPhone y el área de visión de BlackBerry
El ejemplo de uso:
<meta name=«viewport» content=«initial-scale=1.0» />
<meta name=«viewport» content=«user-scalable=false» />
Se puede mezclar la configuración que desee utilizar en un único código meta HTML, tales como:
<meta name=«viewport» content=«width=320,user-scalable=false» />
Espero les sirva este tip para poder modificar su páginas para dispositivos móviles.
La Chabela 