Adaptar cualquier website a dispositivos móviles

Publicado en: Tecnología | 0

Se puede hacer de varias maneras, pero esta que os traigo aquí hoy es creando distintos CSS, uno para pantallas grandes y otros para móviles como el iPhone, y el viewport para ajustar la visualización a la pantalla del dispositivo, ya sea en vertical y horizontal.

En el head, después de cargar el resto de CSS de nuestro site, debemos poner el meta del viewport y un css extra, con la personalización para dispositivos de pantalla de 480px:

<meta name="viewport" content="width=device-width;
 initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link media="only screen and (max-device-width: 480px)"
 href="css/style_iphone.css" type= "text/css" rel="stylesheet">

Solo debéis personalizar vuestro CSS, sobre todo ocultando capas, ajustando tamaños de imágenes, donde podemos hacer que sea el dispositivo quien las redibuje, añadiendo esto a nuestro CSS:

@media only screen and (max-device-width: 480px) {
 img, html .entry-content img {
  max-width:100%;
  height:auto;
 }
}

Y esto es todo. Tendremos nuestra web lista para que sepa discernir la mejor visualización para cada tamaño de pantalla.

Próximo reto, pasar el template por completo a HTML5. Mientras tanto, jugaré con el plugin WP-Touch para WordPress, para darle un estilo que me guste más que el que tiene por defecto.

SaludoX