Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • Web para móbiles axustada ó ancho da pantalla

Web para móbiles axustada ó ancho da pantalla

07 Xuñ 2012 por Luis

Comentarios: 3

Portátil e móbil

Cando facemos unha páxina web para ser vista nun móbil, podemos atoparnos con que esta vese moi pequena, ocupando unicamente unha parte da pantalla. Este efecto é debido a que os navegadores para móbiles cando abren unha páxina web dan por suposto que estará optimizada para navegadores de escritorio, así que o que fan é asignarlle un ancho por defecto (que varía segundo o dispositivo) e escalan o contido para que apareza completo na pantalla.

Poñamos por exemplo que facemos unha páxina web cunha imaxe de 320 píxeles de ancho. O resultado sería este en un iPhone:

Viewport 320px

Como podemos ver, a pesar de que o iPhone ten unha pantalla de 320 píxeles de ancho, a imaxe vese reducida debido ó efecto de escala que fai o navegador, obrigando ó usuario a facer zoom para poder ver ben a páxina. Ademais, como os distintos dispositivos utilizan un ancho por defecto diferente, a páxina verase de distinto tamaño noutros móbiles.

A etiqueta meta viewport

Podemos corrixir o comportamento dos navegadores móbiles ca seguinte etiqueta, na zona <head> da páxina web:

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

Esta etiqueta indícalle ó navegador o ancho que debe usar para a páxina web (neste caso, o ancho da pantalla do dispositivo). Con isto, o noso exemplo queda así:

Viewport 320px con meta

Atributos de meta viewport

No noso exemplo, dicímoslle ó navegador que use o ancho do dispositivo, aínda que lle poderiamos indicar un ancho fixo en píxeles. Vexamos as opcións de configuración que temos para esta etiqueta:

width
Ancho en píxeles ou device-width para coller o ancho da pantalla.
height
Alto en píxeles ou device-height para coller o alto da pantalla.
user-scalable
(yes ou no) Se o usuario pode ou non facer zoom.
initial-scale
(0.0 a 10.0) Escala a usar a primeira vez que se cargue a páxina web. Para non usar escalado: 1.0.
minimum-scale
(0.0 a 10.0) Escala mínima á que o usuario pode chegar ó facer zoom.
maximum-scale
(0.0 a 10.0) Escala máxima á que o usuario pode chegar ó facer zoom.

Os distintos valores engádense no atributo content, separados por comas (non punto e coma).

O código aconsellado para casos normais é este:

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

Comentarios

3 comentarios. Comentar.

1. Marian o 06 Nov 2014 ás 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 o 24 Feb 2016 ás 22:55:42

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

3. Javier o 27 Abr 2016 ás 20:00:55

Muchisimas gracias, es justo lo q necesitaba

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?