Optimización para visualización en dispositivos móviles

<meta name=viewport content="width=device-width, initial-scale=1">

Hacer clic para expandir...

spitfire dijo:

Buenas, hoy google me envio un mensaje diciendome que mis sitios no se visualizan correctamente en dispositivos moviels como el iphone 5 y que podria solucionarlo configurando una ventana grafica, para ello me recomendaron que agregara esta etiqueta a todas mis paginas:



ahora el contenido se ve a tamaño legible pero solo se muestra la esquina superior izquierda, si el usuario quiere ver algo de la derecha o centro tiene que moverse con la barra horizontal...


...entonces, cual es la forma correcta de mostrar un sitio web en moviles.

aclaro que no uso wp ni otro prefabricado, esta programado por mi, gracias.

Hacer clic para expandir...

sergiogeek dijo:

Esa etiqueta es necesaria para que los navegadores de los móviles puedan reescalar y mostrar correctamente los elementos de la pagina. Igualmente con solo arreglarla no solucionas nada mas allá del mensaje de google, también necesitas un css personalizado para vista móvil. En lo personal, con esa etiqueta + agregando el css personalizados al principal con los condicionales mediaqueries para cada tipo de pantalla queda perfecto.

Si aun no le hiciste css para móvil, igualmente agregala que todo suma :encouragement:

Hacer clic para expandir...

MediaQueries al rescate
Afortunadamente CSS3 incluye los Media Queries, una serie de condiciones y requisitos que nos permiten seleccionar una hoja de estilos especifica según las capacidades especificas de cada dispositivo. Con Media Queries tienes parámetros mas inteligentes para mostrar las hojas de estilo como el ancho y alto del navegador o del equipo, la orientación actual de la pantalla (horizontal o vertical) y hasta la resolución.

Utilizando los media queries puedes mostrar diferentes hojas de estilo optimizadas para la pantalla del equipo que te visita, un ejemplo básico que puedes usar es:

<!– Esta hoja de estilos se muestra si tu dispositivo tiene como máximo 480px de ancho. –>
<link href=”css/movil.css” rel=”stylesheet” type=”text/css” media=”handheld, only screen and (max-device-width: 480px)” />
<!– Este otro query solo se muestra en equipos de escritorio en una ventana de al menos 481px de ancho. –>
<link href=”css/escritorio.css” rel=”stylesheet” type=”text/css” media=”screen and (min-width: 481px)” />

Hacer clic para expandir...

spitfire dijo:

Ok, buscando sobre lo que dijiste encontre esta web
Como crear una versión móvil de tu website solo usando CSS | Revolución móvilRevolución móvil

que habla de lo que me dijo google y de las mediaqueries que decis vos, dicen que hay que agregar esto:



Entonces tengo que crear otro css especial para dispositivos y se mostrara automaticamente cuando alguien entre desde alli

en la misma pagina tienen un sitio de ejemplo que probe en pagespeed insigth y se ve que funciona muy bien:
PageSpeed Insights


Voy a probar a ver que pasa, gracias.

Hacer clic para expandir...

Tu css..................
..............
...............
<mediaqueria 768px>
Si la pantalla es igual a 768 de ancho se usa lo que escribas aca como css
<mediaquerie 480px>
Si la pantalla es igual a 480 de ancho se usa lo que escribas aca como css

y así sucesivamente según las resoluciones que elijas.