决议独立网站？ （或者，“缩放整个网站以填充浏览器”）

Question

我正在开发一个真正受益于填满整个屏幕的项目 - 它基本上是一个7000px长的页面，背景填满整个长度（可能被切成单独的部分并以智能顺序方式加载最终版本），向下滚动时有5或6个不同的片段/区域/幻灯片（基本上是“内容区域”）。

顶部是一个导航栏，可填充设计的整个水平宽度。在它的背景下，背景是一堆不同的元素，放置在背景的特定位置。背景上的位置非常重要，因为每个元素都特定于页面的某个部分。

在我看来，做http://windyroad.org/2007/05/18/resolution-independent-web-design/这样的事情真的非常有用。唉，这是从2007年开始，看起来更像是一个概念验证而不是任何东西。另外，每当有人调整浏览器窗口大小时，使用PHP调整1000x7000px图像的大小似乎是一个坏主意（或者更糟糕的是，五个1000x1000图像！）。

我使用了jQuery脚本来缩放背景图像以填充整个浏览器，但从未遇到任何扩展页面上每个元素的内容。

有没有办法动态扩展整个网站以适应浏览器窗口？

我很确定我已经知道了答案，但我想我会把它扔到那里以防万一有人有想法。

非常感谢！

Answer 1

如果需要，脚本也calculate the scrollbar size。您需要一个带有包装 ID的块（div，span等...）。

这是一个跨浏览器脚本，它支持所有现代浏览器。

我希望你喜欢它。随意使用！

// 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);
}