Cómo hacer una web compatible con dispotivos móviles utilizando CSS

Inicio » Tecnología » Diseño Web » Cómo hacer una web compatible con dispotivos móviles utilizando CSS

Anteriormente ya les había hablado sobre el uso de un script PHP para detectar el dispositivo desde el cual se encontraba navegando el usuario; en esta ocasión lo que vamos a hacer es ajustar una web a algunos dispositivos de navegación como un IPad y un iPhone; se puede aplicar a diversos dispositivos y en el caso del uso de CSS lo único que debemos tener en cuenta es la resolución de la pantalla del dispositivo.

En este caso, el comando que me ha resultado más práctico es el uso del @media screen, pero antes debemos tener en cuenta que los smartphones intentan imitar a los navegadores de alta resolución por lo que al momento de mostrar una página es como si la estuvieran viendo en un monitor normal, siendo este el mayor motivo por el cual el texto de la página se ve tan diminuto en “modo de vista global”, por lo que resulta casi imposible de leer.

Para que un dispositivo móvil muestre la página a una escala que sea fácil de leer se debe utilizar el metaelemento “viewport” que se implementa de la siguiente manera:

La resolución de pantalla de móviles varian de uno a otro, pero casi todos los móviles modernos tienen un device-width estandar de unos 320px independientemente del ancho de la pantalla, tal es el caso que si tu dispositivo móvil tiene un ancho de 640px físicos, una imagen de 320px va a ocupar todo el ancho de la pantalla, utilizando para ello del doble de píxeles, esto explica además por que el texto se ve tan nítido en pantallas pequeñas: La densidad de px es el doble en compración con un monitor de una computadora normal.

Lo más útil de establecer el width al device-width en la metaetiqueta de ventana gráfica es que se actualiza cuando el usuario cambia la orientación del smartphone o el tablet. Combinar esto con las consultas de medios te permite girar el diseño cuando el usuario gira el dispositivo.
Fuente: http://googlewebmaster-es.blogspot.com/2012/06/disenos-adaptables-como-aprovechar-las.html

Contenido comprimido, imágenes más pequeñas – Cultural Institute
Cómo usar el comando @media screen:
@media screen es algo parecido, aplica un estilo determinado solo cuando cambia el tamaño de la pantalla del dispositivo.
En el siguiente ejemplo, ocultar la barra lateral, se activa cuando el ancho del navegador es inferior a 800px.
Ustedes pueden ver los cambios realizados con el comando @media screen en esta misma página, donde se han modificado las proporciones de los diferentes bloques incluyendo las imágenes, para ver los cambios si no tienen un iphone, ipad, etc., pueden verlos reduciendo el ancho de la ventana del navegador, incluso con un navegador de escritorio como Firefox.

En el caso de esta página, habían cambios que requerían mostrarse de una manera diferente cuando el dispositivo de navegación tenga las medidas de un smartphone, es decir mostrarse con un ancho de 300px, por lo que el comando @media screen que acoge todos estos formatos sería algo como:

Modificar el tamaño de las imágenes con CSS:

Una regla principal para tener una buena experiencia de navegación desde un dispositivo móvil es evitar la barra de desplazamiento horizontal que hace en algunas ocasiones imposible el desplazamiento por la página.

En tal sentido la solución es hacer que las imágenes se reduzcan al ancho de la pantalla del dispositivo móvil, evitando de esta manera que se muestre la barra horizontal:

Eso es todo por hoy, si tienen alguna duda o sugerencia, estoy a su disposición.

Probando si se muestra seleccin de Google Adsense

Deja un comentario