Hacer sitio Web compatible con iPhone y Blackberry


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.

About these ads

16 pensamientos en “Hacer sitio Web compatible con iPhone y Blackberry

    • Tratare de hacerlo, ya que hoy en día con la gran cantidad de dispositivos moviles que estan saliendo y las diferentes resoluciones de pantalla es un poco dificil, pero veremos que se puede hacer al respecto.

      Saludos

      • hola,
        interesante tu artículo… crees que puedas hace la publicacion al menos un jemplo de codigo que se adapte a balckberry y iphone.. alos modelos mas convencioanles … si para parctikar y ver los resultados de forma real

        sabes escuche de unos simuladores tambien tu sabes algo???

        graciasssss y saludos

  1. Hey! This post couldn’t be written any better! Reading through this post reminds me of my good old room mate! He always kept chatting about this. I will forward this post to him. Fairly certain he will have a good read. Thank you for sharing!

  2. With Medieval clothing one tends to have a very ‘individual look’ that is
    individual’s pride and others’ envy in one go. Don’t panic, each of them was created for a reason. As a fashion statement, the bustier does not seem to be going anywhere as it is still seen often on runways or in videos.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s