Lo primero que tenemos que hacer es personalizar el código HTML de la página web para validarlo en móviles. Para esta tarea utilizaremos la extensión mobileToolkit que está disponible para navegadores Chrome y Firefox. La herramienta te otorga información precisa que te será de gran utilidad.
W3
mobileToolkit
Luego de purgar el HTML de la página web vamos a centrarnos en el CSS. Actualmente las páginas web que desarrollemos tienen que ser páginas inteligentesque puedan verse correctamente desde un iPad, un dispositivo Android, una tablet o un ordenador de sobremesa, aunque cada uno de ellos cuenta con un tamaño de pantalla diferente.
Ajustar CSS:
La versión de CSS3 incluye los Media Queries. Los mismos nos permiten seleccionar una hoja de estilo para cada dispositivo móvil y podrás manipular el ancho, el alto, la orientación vertical u horizontal y la resolución de la pantalla. Lo que vamos a manipular son los Media types tanto el “handheld” correspondiente a los dispositivos móviles, como el “screen” correspondiente para los ordenadores de sobremesa.
El código para dispositivos móviles es el siguiente:
<link href=”css/movil.css” rel=”stylesheet” type=”text/css” media=”handheld, only screen and (max-device-width: 480px)” />
El código para equipos de sobremesa es el siguiente:
<link href=”css/escritorio.css” rel=”stylesheet” type=”text/css” media=”screen and (min-width: 481px)” />
Para los dispositivos móviles tienes un máximo de “480” y en los ordenadores de sobremesa un mínimo de “481”. Aquí podrás manipular el valor de los “px” a la medida deseada.
Ahora vamos a ajustar el valor viewport. Este parámetro es tomado por los Smartphone y define el área visible de la página web (escala y Zoom).
La línea que insertaremos para personalizar el viewport pueden ser dos. Ambas están optimizadas para la gran mayoría de Smartphone disponible en el mercado.
Opción uno:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Opción dos:
<meta name="viewport" content="width=device-width"/>
El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “<head>”.
El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “”.
viewport
De esta manera adaptaras tu página web a los navegadores más usados por los principales dispositivos móviles y harás que tu web sea visible en diferentes plataformas y se adapte a las necesidades de cada usuario.
A continuación te dejamos una herramienta de Google con la cual podrás observar elaspecto de tu sitio web desde un Smartphone, generándote la herramienta un informe con recomendaciones que te será muy útil.
* fuente: neoteo.com
No hay comentarios:
Publicar un comentario