解决独立网站？ （或者，“缩放整个网站以填充浏览器”） [英] Resolution independent websites? (Or, "Scaling an entire website to fill the browser")

问题描述

我正在研究一个真正能够从填充整个屏幕中受益的项目 - 它基本上是一个长度为7000px的页面，它具有巨大的背景填充（可能被切成单独的片段并以智能顺序方式加载最终版本），当您向下滚动时，会显示5或6个不同的细分/区域/幻灯片（基本上就是内容区域）。 上面有一个导航栏填充设计的整个水平宽度。在它下面的背景上，有一些不同的元素，放置在背景上的特定位置。因为每个元素都是特定于页面的某个部分，所以在后台放置是至关重要的。

在我看来，像 http://windyroad.org/2007/05/18/resolution-independent-web-design/ < a>真的很有用。唉，这是从2007年开始的，似乎更像是一个概念验证，而不是任何事情。另外，每次有人调整浏览器窗口大小时，使用PHP调整1000x7000px图像的大小似乎不是个好主意（甚至更糟糕的是，5张1000x1000的图片！）。

我已经使用了扩展背景图片来填充整个浏览器的jQuery脚本，但是从来没有碰到任何扩展页面上每个元素的东西。

有没有什么办法可以动态的缩小整个网站以适应浏览器窗口？

我很确定我已经知道答案，但想到我会把它扔到那里如果有人有一个想法。

非常感谢！

解决方案

该脚本还计算滚动条大小 if需要。你需要一个块（ div ， span ，等等......）与 wrapper id。

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

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

  //不要忘了将此添加到您的包装的CSS块
 //这将保留您的网站居中
 //如果您使用margin-left：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％; 
 
函数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; （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和Safari 
 Wrapper.style.webkitTransform = ScaleText; 
 // Firefox 
 Wrapper.style.MozTransform = ScaleText; 
 // Internet Explorer 
 Wrapper.style.msTransform = ScaleText; 
 // Opera 
 Wrapper.style.OTransform = ScaleText; 
 //标准
 Wrapper.style.transform = ScaleText; 
} 
 
函数GetScrollBarWidth（）
 {
 var inner = document.createElement（'p'）; 
 inner.style.width ='100％'; 
 inner.style.height ='200px'; 
 
 var outer = document.createElement（'div'）; 
 outer.style.position ='绝对'; 
 outer.style.top ='0px'; 
 outer.style.left ='0px'; 
 outer.style.visibility ='hidden'; 
 outer.style.width ='200px'; 
 outer.style.height ='150px'; 
 outer.style.overflow ='隐藏'; 
 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）; 
} 
  

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!

解决方案

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

这篇关于解决独立网站？ （或者，“缩放整个网站以填充浏览器”）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！