我正在开发一个真正受益于填充整个屏幕的项目——它本质上是一个 7000 像素长的页面,带有填充整个长度的巨大背景(可能被切成单独的部分,并在最终版本中以智能顺序方式加载) ),当您向下滚动时,有 5 或 6 个不同的片段/区域/幻灯片(基本上是“内容区域”)。
顶部是一个导航栏,填充了设计的整个水平宽度。在其下方的背景上,是一堆不同的元素,放置在背景上的特定位置。背景上的位置至关重要,因为每个元素都特定于页面的特定部分。
在我看来,做类似的事情http://windyroad.org/2007/05/18/resolution-independent-web-design/ http://windyroad.org/2007/05/18/resolution-independent-web-design/真的非常有用。唉,那是 2007 年的事了,看起来更像是一个概念验证。另外,每次有人调整浏览器窗口大小时,用 PHP 调整 1000x7000 像素图像的大小似乎是个坏主意(或者更糟糕的是,五个 1000x1000 图像!)。
我使用过 jQuery 脚本来缩放背景图像以填充整个浏览器,但从未遇到过任何缩放页面上每个元素的东西。
有没有办法动态缩放整个网站以适应浏览器窗口?
我很确定我已经知道答案,但我想我会把它扔在那里以防万一有人有想法。
非常感谢!
剧本还计算滚动条大小 https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes/986977#986977如果需要的话。您将需要一个块(div
, span
等...)与wrapper id.
这是一个跨浏览器脚本,它支持所有现代浏览器。
我希望你喜欢它。放心使用!
// 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);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)