Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • Web para móviles ajustada al ancho de la pantalla

Web para móviles ajustada al ancho de la pantalla

07 Jun 2012 por Luis

Comentarios: 3

Portátil y móvil

Cuando hacemos una página web para ser vista en un móvil, podemos encontrarnos con que ésta se ve muy pequeña, ocupando únicamente una parte de la pantalla. Este efecto es debido a que los navegadores para móviles cuando abren una página web dan por supuesto que estará optimizada para navegadores de escritorio, así que lo que hacen es asignarle un ancho por defecto (que varía según el dispositivo) y escalan el contenido para que aparezca completo en la pantalla.

Pongamos por ejemplo que hacemos una página web con una imagen de 320 píxeles de ancho. El resultado sería este en un iPhone:

Viewport 320px

Como podemos ver, a pesar de que el iPhone tiene una pantalla de 320 píxeles de ancho, la imagen se ve reducida debido al efecto de escala que hace el navegador, obligando al usuario a hacer zoom para poder ver bien la página. Además, como los distintos dispositivos utilizan un ancho por defecto diferente, la página se verá de distinto tamaño en otros móviles.

La etiqueta meta viewport

Podemos corregir el comportamiento de los navegadores móviles con la siguiente etiqueta, en la zona <head> de la página web:

<meta name="viewport" content="width=device-width"/>

Esta etiqueta le indica al navegador el ancho que debe usar para la página web (en este caso, el ancho de la pantalla del dispositivo). Con esto, nuestro ejemplo queda así:

Viewport 320px con meta

Atributos de meta viewport

En nuestro ejemplo, le decimos al navegador que use el ancho del dispositivo, aunque le podríamos haber indicado un ancho fijo en píxeles. Veamos las opciones de configuración que tenemos para esta etiqueta:

width
Ancho en píxeles o device-width para coger el ancho de la pantalla.
height
Alto en píxeles o device-height para coger el alto de la pantalla.
user-scalable
(yes o no) Si el usuario puede o no hacer zoom.
initial-scale
(0.0 a 10.0) Escala a usar la primera vez que se cargue la página web. Para no usar escalado: 1.0.
minimum-scale
(0.0 a 10.0) Escala mínima a la que el usuario puede llegar al hacer zoom.
maximum-scale
(0.0 a 10.0) Escala máxima a la que el usuario puede llegar al hacer zoom.

Los distintos valores se añaden en el atributo content, separados por comas (no punto y coma).

El código aconsejado para casos normales es este:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Comentarios

3 comentarios. Comentar.

1. Marian el 06 Nov 2014 a las 22:52:23

Justo ese es el problema que estoy teniendo y no encuentro solución... Llevo cuatro diaaaaas en esto y por fin apareceis vosotros, y encima de MI TIERRA...

Bueno, pues me pongo a ello y os cuento...

Gracias

Vuelvo eh, salga lo que salga...

2. conchi el 24 Feb 2016 a las 22:55:42

Yo no puedo adaptar mi web hecha con marcos, gracias a dispositivos moviles

3. Javier el 27 Abr 2016 a las 20:00:55

Muchisimas gracias, es justo lo q necesitaba

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?