Uno de los conceptos clave en cualquier diseño receptivo es el cambio del tamaño de la ventana gráfica. Esto se debe a que las vistas móviles varían mucho de las vistas de escritorio. Para controlar el tamaño de la ventana gráfica, usamos tradicionalmente la metaetiqueta de la ventana gráfica.
Sin embargo, la metaetiqueta de la ventana gráfica, como todos los desarrollos de navegador peores de la última vez, no es válida para W3C. Fue originalmente presentado por Apple en Safari y desde entonces ha sido adoptado por otros navegadores. Esto da como resultado una implementación inconsistente.
Afortunadamente, el W3C ha vuelto a nuestro rescate mediante la introducción de la regla @viewport CSS.
Usando el enfoque antiguo de metaetiqueta, así es como le decíamos al navegador qué tamaño debería tener la ventana gráfica:
Además de no ser válida, la instrucción de la vista no es datos, es presentación. Entonces, apegándonos a nuestros principios de separación de datos y presentaciones, la instrucción de la ventana gráfica debe estar en CSS, no en HTML.
La solución W3C en CSS se ve así:
@viewport {width: device-width;}O, alternativamente, puede configurar la ventana gráfica con un número, como ese:
@viewport {width: 640px;}Puede usar la regla @viewport en conjunto con las consultas de @media para forzar a cualquier ventana mayor a 960 a contraerse a 960px, así:
@media screen and (min-width: 960px){@viewport {width: 960px;}}La regla @viewport también nos permite acercarnos a una página de manera predeterminada, e incluso configurar el zoom máximo:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Es posible bloquear el zoom por completo estableciendo la propiedad de zoom del usuario en fija. Sin embargo, el zoom, especialmente en los teléfonos inteligentes, es necesario para la accesibilidad y recomendaría usar esta propiedad.
Otra propiedad muy útil nos permite bloquear nuestra página web en modo horizontal o vertical:
@viewport {orientation: landscape;}Aquí están las malas noticias: actualmente esta regla solo es compatible con Internet Explorer 10 y Opera, y requiere los prefijos -ms- y -o- del navegador, respectivamente.
Si bien eso es decepcionante por decir lo menos, el hecho de que la funcionalidad de la vista ya está disponible en la mayoría de los navegadores debería significar que esta es una regla simple de recoger. Con suerte comenzaremos a verlo introducido en construcciones nocturnas muy pronto.
¿Le importa el cumplimiento de las normas? ¿El W3C ayuda o dificulta el progreso en la web? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de la ventana a través de LostBob Photos