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