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

如果您觉得上面的内容对您有帮助,可以打赏支持一下!

打赏

关键词: jQuery javascript代码