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

Hola afición!

Con la técnica recomendada a día de hoy por Apple de utilizar CSS y el Viewport he adaptado mi blog WordPress, y mi plantilla personalizada con la base de la plantilla por defecto Twenty Ten para que pueda verse y sobre todo leerse bien en el iPhone y en los iPod Touch.

MacOSas adaptación para iPhone e iPod Touch

No la he probado todavía en dispositivos con Android. En Android y en cualquier móvil smartphone funciona y se ve como en el pantallazo. No es posible ver el site completo, como en una pantalla grande por hacerlo vía CSS, y no viendo el user-agent de cada navegador o incluso con PHP, para decidir que visualización devolver.

Es mi primera aproximación al viewport, hay que limar cosas, pero sobre todo hay que pensar desde el principio del desarrollo de una plantilla pensando en el desarrollo del CSS para pantallas pequeñas, estilo móvil, tabletas, etc.

SaludoX