自动缩放HTML页面

Question

我想知道是否有可能使不可滚动的网页全宽头，内容和页脚缩放在不同的显示器尺寸？所以它可以作为网站的前端运行。

Answer 1

是的，这是可能的。你可以做一些简单的像（jsFiddle）：

身体：

<div id="header"> header </div> 
body 
<div id="footer">footer</div> 

并使用CSS来管理布局：

#header{width:100%; background:#f00;} 
#footer{width:100%; background:#f00;bottom:0;position:absolute;} 

为了使页面不可滚动，你可以简单地隐藏通过指定页面滚动条：

body{ overflow: hidden;} 

这不会工作完美fo所有场景，但它应该让你开始。

Answer 2

你可以用VH和WH单位对CSS 3.0

检查这个link更多的信息，还你可以查看一些例子here，看看它在action

Answer 3

是的，是可以做到的。这是一个我用小CSS创建的Javascript函数。这非常适合在不改变比例的情况下自动调整页面的大小。这将调整启动时的页面大小和窗口的大小。

CSS：

body{ 
    height:620px; 
    width:1023px; 
    position:absolute; 
    box-sizing:border-box; 
    transform-origin: 0 0; 
    -moz-transform-origin:0 0; 
    -o-transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
} 

的JavaScript：

var ratio; 
var left; 
resize(); 

$(window).resize(function() {resize();}); 

function resize() 
{ 
    ratio = window.innerHeight/$('body').innerHeight(); 
    if (window.innerWidth/$('body').innerWidth() < ratio) { 
     ratio = window.innerWidth/$('body').innerWidth(); 
    } 
    ratio -= .04; 
    $('body').css('-ms-zoom', ratio); 
    $('body').css('-moz-transform', 'scale(' + ratio + ')'); 
    $('body').css('-o-transform', 'scale(' + ratio + ')'); 
    $('body').css('-webkit-transform', 'scale(' + ratio + ')'); 
    $('body').css('transform', 'scale(' + ratio + ')'); 
    left = ($(window).innerWidth() - $('body').outerWidth() * ratio)/2; 
    $('body').css('left', left); 
}