浏览器设置非100%时,能够自动调整浏览器百分比,显示页面按照100%显示,比如浏览器125%,用户也不知道的情况下,显示时页面会被放大,这时可以通过
$("body").css({ transform: "scale("+ratioX+","+ratioY+")", transformOrigin: "left top", overflow:"hidden" });
进行页面缩放设定,缩放比例为“100/当前百分比”
<html>
<head>
<title>自动恢复缩放比例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
</style>
</head>
<body>
<img src="../images/guangzhou.png" />
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//获取浏览器缩放比例
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;
}
//监听浏览器变化
window.onresize = function() {
// initWindowSize();
};
//进行比例缩放
function setAppScale(ratio) {
var ratioX = (100/ratio);
var ratioY = (100/ratio);
$("body").css({
transform: "scale("+ratioX+","+ratioY+")",
transformOrigin: "left top",
// overflow:"hidden"
});
}
function initWindowSize(){
var ratio = ChangeRatio();
console.log(ratio);
setAppScale(ratio);
}
initWindowSize();
</script>
</body>
</html>