系统自适应 Ctrl+滚轮缩放界面等比例放大（页面不乱）

Ctrl+滚轮缩放界面等比例放大，并且保持页面不乱，实现比较简单获取当前浏览器比例，然后将body的高度、宽度拉伸一下就OK

function ChangeRatio() {var ratio = 0;var screen = window.screen;var ua = navigator.userAgent.toLowerCase();if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;}else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;}if (ratio) {ratio = Math.round(ratio * 100);}return ratio;}//进行比例缩放function setAppScale(ratio) {$("body").width(ratio+"vw");$("body").height(ratio+"vh");//var ratioX = (300/ratio);//var ratioY = (300/ratio);var ratioX = 1;var ratioY = 1;console.log("????",ratioX);$("body").css({minWidth:1366,minHeight:768,transform: "scale("+ratioX+","+ratioY+")",transformOrigin: "left top",overflow:"auto"});}var curRatio = 100;$().ready(function(){curRatio = ChangeRatio();console.log(curRatio);setAppScale(curRatio);});function changeBody(curRatio){$("body").width(curRatio+"vw");$("body").height(curRatio+"vh");}window.onresize = function() {curRatio = ChangeRatio();console.log(curRatio);setAppScale(curRatio);};

上种方式在某些框架里不显示滚动条，可以通过内套一个div搞定

1、设置body样式style="width: 100%;height:100%;"

2、body内套一层最大的div（changeScaleDiv），用来放大超出范围显示滚动条，同样标签样式style="width: 100%;height:100%;"

3、body通过px的方式指定大小，否则不出滚动条

4、body内最大的div（changeScaleDiv）也通过px的方式指定大小，并且指定最小宽度minWidth、最小高度minHeight

5、监听onresize事件，每次变动修改changeScaleDiv的宽度和高度

/*** Created by muyunfei on /1/20.*/function ChangeRatio() {var ratio = 0;var screen = window.screen;var ua = navigator.userAgent.toLowerCase();if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;}else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;}if (ratio) {ratio = Math.round(ratio * 100);}return ratio;}//进行比例缩放function setAppScale(ratio) {$("body").width("100%");$("body").height("100%");$("body").width($("body").width());$("body").height($("body").height());$("body").css({overflow:'auto'})$("#changeScaleDiv").width(ratio+"%");$("#changeScaleDiv").height(ratio+"%");$("#changeScaleDiv").width($("#changeScaleDiv").width());$("#changeScaleDiv").height($("#changeScaleDiv").height());//var ratioX = (300/ratio);//var ratioY = (300/ratio);var ratioX = 1;var ratioY = 1;console.log("$(\"body\")",$("body"))$("body").css({transform: "scale("+ratioX+","+ratioY+")",transformOrigin: "left top",overflow:"auto"});}var curRatio = 100;var initRatio = 100;$().ready(function(){initRatio = ChangeRatio();init();});function init(){//1、设置body样式style="width: 100%;height:100%;"//2、body内套一层最大的div（changeScaleDiv），用来放大超出范围显示滚动条，同样标签样式style="width: 100%;height:100%;"//3、body通过px的方式指定大小，否则不出滚动条//4、body内最大的div（changeScaleDiv）也通过px的方式指定大小，并且指定最小宽度、最小高度//5、监听onresize事件，每次变动修改changeScaleDiv的宽度和高度$("body").width($("body").width());$("body").height($("body").height());$("body").css({overflow:'auto'})$("#changeScaleDiv").width($("body").width());$("#changeScaleDiv").height($("body").height());$("#changeScaleDiv").css({minWidth:1600,minHeight:768})}window.onresize = function() {curRatio = ChangeRatio();if(curRatio == initRatio){//恢复初始样子$("body").width("100%");$("body").height("100%");init();}else{setAppScale(curRatio);}};