瀏覽器設置非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>