分辨率独立的网站？（或者，“缩放整个网站以填充浏览器”）答案

【问题标题】：Resolution independent websites? (Or, "Scaling an entire website to fill the browser")分辨率独立的网站？（或者，“缩放整个网站以填充浏览器”）
【发布时间】：2011-07-08 06:37:14
【问题描述】：

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

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

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

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

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

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

非常感谢！

【问题讨论】：

coding.smashingmagazine.com/2011/01/12/…
很酷的文章，以前没看过。
是的，那篇文章很旧，是的，它比其他任何东西都更重要的是概念验证。在使用 PHP 调整图像大小方面，有一篇从未发布过的文章版本 2 可以使用不同大小图像的目录并提供最合适的或以其他方式生成正确的大小，将其保存到目录并提供它.无论如何，那是很久以前的事了，smasingmagazine 的文章看起来更全面，更不用说更新了

标签： jquery html css scaling

【解决方案1】：

如果需要，脚本也可以calculate the scrollbar size。您将需要一个带有 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);
}

【讨论】：