2012-06-05 31 views
24
  1. ¿Qué navegadores son compatibles con esta etiqueta meta?
  2. ¿Cómo lo uso?
  3. ¿Esto significa que va a resolver todos mis problemas de redimensionamiento móvil?

Si alguien puede responder a esta sería una gran ayuda para los novatos aprender¿Cómo se usa la etiqueta meta viewport y qué hace?

<meta="viewport"> 

Respuesta

20
  1. El soporte de navegador de visualización es un poco en todos los ámbitos. Le indicaré el Quirksmode page for viewport browser support para obtener más información.
  2. Utiliza la metaetiqueta de la ventana gráfica como cualquier otra metaetiqueta. Coloque el bloque de código directamente en el <head>.
  3. Bastante, pero, de nuevo, un poco de un bocado para decir aquí. Aconsejaría reading some articles, reading the W3 mobile best practices for web design o the current W3 draft specifications on the viewport attribute for the <meta> tag.

En resumen, agregar esta línea a un sitio web que debería implementar escalado de ventanas gráficas debería solucionar la mayoría de los problemas. (Copiado de WebDesignTuts+'s "Quick Tip: Don't Forget the Viewport Meta Tag" article)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

P. S. Quirksmode también tiene a rather wonderful article describing the issue que vale la pena leer para entender por qué esto podría ser útil.

+0

Artículo excelente. Una pequeña pregunta. Cuando dicen "diseñar con flexibilidad", ¿significa eso que todos los tamaños (anchuras y alturas) están en porcentajes (%)? –

+0

Creo que simplemente se refiere al concepto de [diseño web receptivo] (http://arstechnica.com/business/2012/05/whats-responsive-web-design-all-about/), por lo que no necesariamente significa que los anchos y las alturas serán en porcentajes, pero significará que el sitio web debe verse cómodamente en pantallas de todos los tamaños. Da la casualidad de que, en el ejemplo que proporciona el artículo, podría tratarse de consultas de medios y anchos basados ​​en porcentajes. – Nightfirecat

+0

impresionante. ¡Gracias! –

0

etiqueta de ventana Meta se utiliza para ajustar el tamaño y la visibilidad de la página web de acuerdo con el tamaño de la pantalla de visualización. Ayuda a que la página web se ajuste automáticamente en Android, tableta o iphone.

Cuestiones relacionadas