» » Adaptar cualquier website a dispositivos móviles

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.