Resolución de sitios web independientes? (O bien, “Escalar un sitio web completo para llenar el navegador”)

Estoy trabajando en un proyecto que realmente se beneficiaría de llenar toda la pantalla: es esencialmente una página de 7000px de largo con un fondo gigante que lo llena todo (probablemente cortado en trozos separados y cargado de una manera secuencial inteligente en la versión final) ), con 5 o 6 segmentos / áreas / diapositivas diferentes (básicamente, “áreas de contenido”) a medida que se desplaza hacia abajo.

En la parte superior hay una barra de navegación que llena todo el ancho horizontal del diseño. Debajo, en el fondo, hay un montón de elementos diferentes, colocados en posiciones específicas en el fondo. La ubicación en el fondo es crítica ya que cada elemento es específico de una determinada sección de la página.

Me parece que hacer algo como http://windyroad.org/2007/05/18/resolution-independent-web-design/ sería realmente muy útil. Por desgracia, eso es de 2007 y parece más una prueba de concepto que otra cosa. Además, parece una mala idea cambiar el tamaño de una imagen de 1000x7000px con PHP cada vez que alguien cambia el tamaño de la ventana de su navegador (¡o incluso peor, cinco imágenes de 1000×1000!).

Utilicé scripts jQuery que escalan una imagen de fondo para llenar todo el navegador, pero nunca encontré nada que escale cada elemento en la página.

¿Hay alguna manera de escalar dinámicamente un sitio web completo para que se ajuste a la ventana del navegador?

Estoy bastante seguro de que ya sé la respuesta, pero pensé que la arrojaría allí en caso de que alguien tuviera una idea.

¡Muchas gracias!

El script también calcula el tamaño de la barra de desplazamiento si es necesario. Necesitarás un bloque ( div , span , etc …) con el id de envoltura .

Este es un script de navegador cruzado , es compatible con todos los navegadores modernos.

Espero que te guste. ¡Siéntase libre de usar!

 // DONT FORGET TO ADD THIS TO YOUR WRAPPER'S CSS BLOCK // THIS WILL KEEP YOUR SITE CENTERED // IF YOU USE margin-left:auto; margin-right:auto; // transform-origin: 50% 0%; // -ms-transform-origin: 50% 0%; // -moz-transform-origin: 50% 0%; // -webkit-transform-origin: 50% 0%; // -o-transform-origin: 50% 0%; function FitToScreen(FitType) { var Wrapper = document.getElementById('wrapper'); var ScreenWidth = window.innerWidth; var ScreenHeight = window.innerHeight; var WrapperWidth = Wrapper.offsetWidth; var WrapperHeight = Wrapper.offsetHeight + 200; var WidthRatio = parseFloat(ScreenWidth/WrapperWidth); var HeightRatio = parseFloat(ScreenHeight/WrapperHeight); var ScaleRatio = 1.0; if (FitType == 'width') { ScaleRatio = WidthRatio; if(ScaleRatio * WrapperHeight > ScreenHeight) { ScaleRatio = parseFloat(ScreenWidth/(WrapperWidth + GetScrollBarWidth () -1)); } } else if (FitType == 'height') { ScaleRatio = HeightRatio; if(ScaleRatio * WrapperWidth > ScreenWidth) { ScaleRatio = parseFloat(ScreenHeight/(WrapperHeight + GetScrollBarWidth () -1)); } } var ScaleText = 'scale(' + ScaleRatio.toString().replace(',','.') + ')'; //Chrome and Safari Wrapper.style.webkitTransform = ScaleText; //Firefox Wrapper.style.MozTransform = ScaleText; //Internet Explorer Wrapper.style.msTransform = ScaleText; //Opera Wrapper.style.OTransform = ScaleText; //Standard Wrapper.style.transform = ScaleText; } function GetScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = '100%'; inner.style.height = '200px'; var outer = document.createElement('div'); outer.style.position = 'absolute'; outer.style.top = '0px'; outer.style.left = '0px'; outer.style.visibility = 'hidden'; outer.style.width = '200px'; outer.style.height = '150px'; outer.style.overflow = 'hidden'; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild (outer); return (w1 - w2); }