Adaptar el tamaño de una web a pantallas grandes con un simple zoom vía CSS

Mirad, lo que os voy a contar no es la más optima de las soluciones, pero sí es un recurso que en algún momento os puede ahorrar trabajo para salir del paso.

Hoy por hoy, todo es optimización para dispositivos móviles, de hecho la web va camino de tener que orientarse casi exclusivamente para ese tipo de pantallas, dejando las de sobremesa en un segundo lugar, ¿os suena eso del mobile first? Pero siempre está ese cliente puñetero o ese usuario final exigente al que le da por ver vuestro trabajo en su televisor HD y os dice con su voz más odiosa: «Pues en mi pantalla se ve todo muy pequeño y con mucho fondo por los lados…» ¿¡En serio!? ¿Quién ve las webs de artículos de lectura en sus televisores? La gente. La gente ve cualquier cosa en cualquier tipo de dispositivo porque para eso somos muchos, con demasiado tiempo y con multitud de formas de enfrentarnos a la misma sencilla y pequeña página web.

Lo ideal, en estos casos, sería ponerse a diseñar una nueva disposición para que nuestra web encajara también en pantallas «enormes» al igual que ya lo hace en las de las tabletas y las de los móviles… o, por qué no, contar con una ordenación de parrilla o cuadrícula al más puro estilo Pinterest, de manera que los elementos se agrupen de uno en uno, dos, tres o veinte dependiendo de cada pantalla. Pero muchas veces este tipo de presentación no es compatible con lo que necesitamos o con lo que nos han pedido y, si somos un poco rastreros, a ese usuario de antes le hubiéramos contestado: «¿Es que no sabes usar el zoom de tu navegador?» ¡Eureka!, ¿y si obligamos a la página a hacer zoom aunque el inútil de turno no sepa? Pues dicho y hecho.

transform:scale

Teniendo en cuenta que contamos con una web ya adaptada a dispositivos móviles, nuestro código incluirá de antemano en el head del HTML la línea que indica la escala del viewport (si no, ver esta entrada o si tampoco, a lo mejor hay suerte, porque los navegadores han evolucionado y ya dan ciertos temas por sentado). En ese caso, simplemente añadiremos a nuestro CSS las siguientes líneas indicándole al navegador que las interprete que, cuando se enfrente a pantallas grandes (en el ejemplo, pantallas cuyo ancho supere los 1400px), aumente la escala de nuestra web:

@media screen and (min-width:1400px) {
 #warp {
    -webkit-transform:scale(1.2);
    -webkit-transform-origin:50% 0%;
  transform:scale(1.2);
  transform-origin:50% 0%;
  }
}

Aunque las últimas versiones de Opera y Chrome sí soportan este comportamiento, Safari no. Así que, como todos usan Webkit, hay que incluir el prefijo -webkit por culpa de este último. Por otro lado, ATENCIÓN, los antiguos iE –del 8 para atrás– directamente no soportan la solución «scale» (permitidme que no me asombre). Para conseguir un efecto parecido habría que usar una serie de filtros engorrosos, de manera que si quereis intentarlo, empezad por aquí.

Sobre el fragmento de código, tened en cuenta tres cosas:

1. #warp es el nombre del div contenedor de nuestra web, esa capa maestra que engloba todo el contenido y que solemos usar para centrarlo.
2. Con transform:scale(1.2); podéis cambiar el aumento del «zoom» variando el índice a 1.3 por ejemplo o lo que más os guste. O si utilizáis este mismo truco con varios tamaños de pantalla, para ir incrementando el propio zoom.
3. Y transform-origin:50% 0%; hace referencia al posicionamiento vertical y horizontal. Esto puede dar auténticos quebraderos de cabeza, así que suerte :P

Como en otras ocasiones, os dejo aquí un ejemplo que poder toquetear sin tener que crearlo vosotros mismos. Ah, y, claro, esto funciona de vicio con textos, vectores (SVG)… todo lo escalable, pero, obviamente, llegará un punto en que las imágenes no vectoriales empezarán a parecer borrosas. Debemos conocer los límites de nuestra web.