等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放

非响应式web网页，在小于web网页设置的宽度的分辨率电脑下显示，会出现滚动条滚动显示超出分辨率的内容，如：网页主体宽度为设置为width:1400px，那么在1280分辨率电脑的浏览器上访问，就会出现横向滚动条。

如果想完整显示，又不做成响应式结构，可以通过等比例缩放的形式让网页完整显示在1280分辨率电脑的浏览器上，等同于浏览器“Ctrl+鼠标滚动”的缩放效果。

代码也很简单，通过jquery的resize()方法和css的zoom属性即中。

实现代码

$(window).resize(function () {

var win = $(this).width();

if (win < 1493) { //宽度小于1493时，按1493和窗口实际宽度计算等比

$("body").css("zoom", win / 1493);

}else{

$("body").css("zoom", "normal");

}

}).trigger('resize');

代码说明

resize()方法

当调整浏览器窗口的大小时，发生 resize 事件或函数。

zoom属性

设置或检索对象的缩放比例，可使用浮点数或百分比来定义缩放比例

支持的浏览器：IE6+、Firefox > 18、Safari 5.1.7+、Chrome 13+、Opera > 12.5