与分辨率无关的网站？ （或者，“缩放整个网站以填充浏览器”）

Question

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

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

在我看来，它正在做类似 http://windyroad.org/2007 /05/18/resolution-independent-web-design/ 真的非常有用。唉，那是 2007 年的事了，看起来更像是一个概念验证。另外，每次有人调整浏览器窗口大小时，用 PHP 调整 1000x7000 像素图像的大小似乎是个坏主意（或者更糟糕的是，五个 1000x1000 图像！）。

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

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

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

非常感谢！

Answer 1

该脚本还计算滚动条大小，如果需要。您将需要一个带有 wrapper 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);
}