Resolution independent websites? (Or, “Scaling an

问题:

I'm working on a project that would really benefit from filling the whole screen -- it's essentially one 7000px-long page with a giant background filling the whole length (probably chopped into separate pieces and loaded in an intelligent sequential fashion in the final version), with 5 or 6 different segments/areas/slides (basically, "content areas") as you scroll down.

At the top is a navigation bar that fills the entire horizontal width of the design. Below it, on the background, are a bunch of different elements, placed at specific positions on the background. The placement on the background is critical as each element is specific to a certain section of the page.

It seems to me doing something like http://windyroad.org/2007/05/18/resolution-independent-web-design/ would be really really useful. Alas, that's from 2007 and seems more like a proof-of-concept than anything. Plus it seems like a bad idea to resize a 1000x7000px image with PHP every time somebody resizes their browser window (Or even worse, five 1000x1000 images!).

I've used jQuery scripts that scale a background image to fill the entire browser, but never ran across anything that scales every element on page.

Is there any way to dynamically scale an entire website to fit the browser window?

I'm pretty sure I already know the answer, but figured I'd toss it out there just in case somebody has an idea.

Many thanks!

回答1:

The script also calculate the scrollbar size if needed. You will need a block (div, span, etc...) with the wrapper id.

This is a cross-browser script, it supports all the modern browsers.

I hope you like it. Feel free to use!

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