Blogger hace un buen tiempo que nos permite tener una versión móvil del blog, para muchos es una ventaja ya que incluir esta función es muy sencillo y no es necesaria ninguna personalización complicada, pero para otros la integración es muy básica o bien quieren hacer su plantilla móvil mas acorde a la del blog.
El tutorial:
Para poder llevar a cabo este tutorial es estrictamente necesario conocer sobre CSS, porque empezaremos a diseñar una plantilla básicamente desde cero, en donde sólo tendremos como base el cuerpo del blog.
Paso 1: Migrando el CSS del blog a un archivo:
Para este tutorial es crucial que migren el CSS del blog a un documento .CSS, ya que ahora nos dedicaremos a escribir 2 estilos: Uno para el blog principal, y el otro para la versión móvil.
El primer archivo, deberá ser creado y posteriormente deberás incluirlo con el siguiente código antes de </head>:
<link href='URL-ARCHIVO-CSS' media='screen' rel='stylesheet' type='text/css'/>Reemplazamos lo destacado en verde por la URL del archivo .CSS que hayamos creado.
Explicación: El valor media='screen' lo que hace es permitir que la hoja de estilos cargue únicamente en ordenadores normales.
Paso 2: Creando tu nueva configuración CSS para el móvil:
De la misma manera que creamos el archivo .CSS para la versión normal, crearemos un segundo archivo, el cual contendrá las reglas y los atributos que se aplicarán únicamente cuando haya un teléfono móvil. En lugar de usar media='screen', utilizaremos un sistema de resolución máxima de no más de 480px de ancho:
<link rel="stylesheet" href="URL-CSS-MOVIL" media="only screen and (max-device width:480px)"/>Actualmente los telefonos no tienen una resolución horizontal muy alta, pero si quieres probar en una resolución mayor, recomiendo que no superes los 640px.
Importante: Si no funciona con tu dispositivo, puedes crear una tercera regla de la siguiente forma:
<link rel="stylesheet" href="URL-CSS-MOVIL" media="handheld"/>En donde media="handheld" permitirá que sólo los teléfonos móviles detecten esta hoja de estilos.
Extra: Eliminando el zoom-out del blog en dispositivos móviles:
Si ya haz creado exitosamente tu versión del blog para móviles, puede ser que aún siga existiendo el zoom-out, que básicamente lo que hace es mostrar la página a una escala muy baja, para eliminarlo basta con incluir la siguiente línea dentro de la etiqueta <head>:
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>Con esto limitaremos a 1x el zoom del blog en cualquier teléfono cuyo navegador sepa interpretar esta Meta Etiqueta.
No hay comentarios:
Publicar un comentario