如何在所有现代浏览器中检测页面缩放级别?

小开

这里没有变化!：

<html>
<head>
<title></title>
</head>
<body>
<div id="xy" style="width:400px;">
foobar
</div>
<div>
<button onclick="alert(document.getElementById('xy').style.width);">Show</button>
</div>
</body>
</html>

创建一个简单的HTML文件，点击按钮。不管什么缩放级别:它会显示400px的宽度(至少在firefox和ie8上)

小开

您的计算仍然是基于一些CSS像素。现在它们在屏幕上的大小不同了。这就是整页缩放的意义所在。

您希望在192dpi设备上的浏览器上发生什么，因此通常在图像中的每个像素中显示四个设备像素?在50%缩放时，这个设备现在在一个设备像素中显示一个图像像素。

小开

没有在IE中测试这个，但是如果你创建一个元素elem

min-width: 100%

然后

window.document.width / elem.clientWidth

将给出你的浏览器缩放级别(包括document.body.style.zoom因子)。

小开

在Internet Explorer 7,8 &9、这招管用:

function getZoom() {
var screen;


screen = document.frames.screen;
return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

添加“+0.9”是为了防止舍入错误(否则，当浏览器缩放分别设置为105%和110%时，您将得到104%和109%)。

在IE6中不存在缩放，所以没有必要检查缩放。

小开

最佳答案

现在的情况比刚提出这个问题时还要糟糕。通过阅读我所能找到的所有回复和博客文章，这里有一个总结。我还设置了本页来测试所有这些测量缩放级别的方法。[↑断裂链接。存档副本→这里<强> < / >强]。

编辑(2011-12-12):我已经添加了一个可以克隆的项目:https://github.com/tombigel/detect-zoom

IE8: screen.deviceXDPI / screen.logicalXDPI(或者，对于相对于默认缩放的缩放级别，screen.systemXDPI / screen.logicalXDPI)
IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;(感谢这个例子或这个答案)
FF3.5只: screen.width / media查询屏幕宽度(见下文)(利用了screen.width使用设备像素，而MQ宽度使用CSS像素的事实——感谢Quirksmode宽度)
FF3.6:未知方法
FF4 +:媒体查询二分搜索(见下文)
WebKit: https://www.chromestatus.com/feature/5737866978131968(感谢评论中的Teo)
WebKit:用-webkit-text-size-adjust:none测量div的首选大小。
WebKit:(自r72591起中断)document.width / jQuery(document).width()(感谢上面是Dirk van Oosterbosch)。要获得以设备像素表示的比率(而不是相对于默认缩放)，请乘以window.devicePixelRatio。
老WebKit ?(未验证):parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (from 这个答案)
歌剧: document.documentElement.offsetWidth / position:fixed; width:100% div的宽度。从这里 (quirkmode的宽度表表示这是一个bug;innerWidth应该是CSS px)。我们使用position:fixed元素来获取viewport 包括滚动条所在的空间的宽度;clientwidth不包含这个宽度。自2011年的某个时候起，这种情况就被打破了;我不知道如何在Opera中获得缩放级别。
其他: 来自Sebastian的闪光解决方案
不可靠:监听鼠标事件并测量screenX中的变化/ clientX中的变化

这里是Firefox 4的二进制搜索，因为我不知道它暴露在哪里:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r +
') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration
== 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(
property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(
property, unit, a, mid, maxIter-1, epsilon);
}
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

小开

对我来说，对于Chrome/Webkit， document.width / jQuery(document).width()不起作用。当我将窗口缩小并放大到我的站点时，出现了水平滚动条，在默认缩放时，document.width / jQuery(document).width()不等于1。这是因为document.width包含了视口之外的部分文档。

使用window.innerWidth和window.outerWidth有效。在Chrome中，由于某种原因，outerWidth是以屏幕像素为单位，而innerWidth是以css像素为单位。

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
zoomLevel = "5";
} else {
zoomLevel = "unknown";
}

小开

我发现这篇文章非常有用。非常感谢yonran。我想把我在实现他提供的一些技术时学到的一些额外知识传递给他。在FF6和Chrome 9中，增加了对来自JS的媒体查询的支持，这可以极大地简化确定FF缩放所需的媒体查询方法。请参阅MDN 在这里的文档。出于我的目的，我只需要检测浏览器是否被放大或缩小，我不需要实际的缩放因子。我可以用一行JavaScript得到我的答案:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

结合IE8+和Webkit解决方案(它们也是单行的)，我能够在只有几行代码的情况下检测到绝大多数浏览器的缩放效果。

小开

这可能会或可能不会帮助任何人，但我有一个页面，我不能得到正确的中心，无论什么Css技巧我尝试了，所以我写了一个JQuery文件呼叫中心页面:

问题发生在浏览器的缩放级别，页面会根据您的100%，125%，150%等进行移动。

下面的代码位于一个名为centerpage.js的JQuery文件中。

从我的页面，我必须链接到JQuery和这个文件才能让它工作，即使我的主页已经有一个链接到JQuery。

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
// get body element
var body = document.body;


// if the body element exists
if (body != null) {
// get the clientWidth
var clientWidth = body.clientWidth;


// request data for centering
var windowWidth = document.documentElement.clientWidth;
var left = (windowWidth - bodyWidth) / 2;


// this is a hack, but it works for me a better method is to determine the
// scale but for now it works for my needs
if (left > 84) {
// the zoom level is most likely around 150 or higher
$('#MainBody').removeClass('body').addClass('body150');
} else if (left < 100) {
// the zoom level is most likely around 110 - 140
$('#MainBody').removeClass('body').addClass('body125');
}
}
}




// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
// center the page
centerPage();
});

如果你想让一个面板居中:

// centering panel
function centerPanel($panelControl) {
// if the panel control exists
if ($panelControl && $panelControl.length) {
// request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var panelHeight = $panelControl.height();
var panelWidth = $panelControl.width();


// centering
$panelControl.css({
'position': 'absolute',
'top': (windowHeight - panelHeight) / 2,
'left': (windowWidth - panelWidth) / 2
});


// only need force for IE6
$('#backgroundPanel').css('height', windowHeight);
}
}

小开

这是一个很久以前发布的问题，但今天当我在寻找相同的答案“如何检测放大和缩小事件”时，我找不到一个适合所有浏览器的答案。

现在:对于Firefox/Chrome/IE8和IE9，放大和缩小会触发一个窗口。调整大小事件。这可以使用

捕获

$(window).resize(function() {
//YOUR CODE.
});

小开

这对我来说在基于webkit的浏览器(Chrome, Safari)中非常有效:

function isZoomed() {
var width, mediaQuery;


width = document.body.clientWidth;
mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';


return !window.matchMedia(mediaQuery).matches;
}

但在Firefox中似乎不能正常工作。

这也适用于WebKit:

var zoomLevel = document.width / document.body.clientWidth;

小开

我的同事和我使用了https://github.com/tombigel/detect-zoom中的脚本。此外，我们还动态地创建了一个svg元素并检查其currentScale属性。它在Chrome和大多数浏览器上都很好用。在FF上，“仅缩放文本”功能必须关闭。SVG在大多数浏览器上是支持。在撰写本文时，已在IE10、FF19和Chrome28上进行了测试。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

小开

这是针对铬的，紧随< >强user800583 < / >强劲的答案…

我花了几个小时研究这个问题，并没有找到更好的方法，但是:

有16个“zoomLevel”而不是10个
当Chrome是全屏/最大化的比率是window.outerWidth/window.innerWidth，当它不是，比率似乎是(window.outerWidth-16)/window.innerWidth，然而，第一种情况可以接近第二种情况。

所以我想到了下面这些……

但是这种方法有局限性:例如，如果您在应用程序窗口中使用手风琴(快速放大和减小窗口的宽度)，那么尽管缩放没有改变(可能outerWidth和innerWidth没有同时更新)，但您将在缩放级别之间获得间隙。

var snap = function (r, snaps)
{
var i;
for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
[ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

如果你想要因子:

var snap = function (r, snaps, ratios)
{
var i;
for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
[ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
[ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

小开

我想到的是:

1)用width:100% (id = zoomdiv)做一个position:fixed <div>

2)页面加载时:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

它适用于我的ctrl+和ctrl-缩放。

或者我可以将该行添加到$(window).onresize()事件中以获得活动缩放级别

代码:

<script>
var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;


$(window).resize(function(){
zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
alert(zoom);
});
</script>
<body>
<div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

附注:这是我的第一个帖子，请原谅任何错误

小开

一个变通的FireFox 16+找到DPPX(缩放级别)纯粹与JavaScript:

var dppx = (function (precision) {
var searchDPPX = function(level, min, divisor) {
var wmq = window.matchMedia;
while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
level--;
}
return level;
};


var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
var divisor = 1;
var result;
for (var i = 0; i < precision; i++) {
result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
maxDPPX = result + 9;
minDPPX = result;
divisor *= 10;
}


return result / divisor;
}) (5);

小开

我有这个解决方案手机只(用Android测试):

jQuery(function($){


zoom_level = function(){


$("body").prepend('<div class="overlay" ' +
'style="position:fixed; top:0%; left:0%; ' +
'width:100%; height:100%; z-index:1;"></div>');


var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
$("body .overlay:eq(0)").remove();


return ratio;
}


alert(zoom_level());


});

如果你想要缩放级别在缩放移动之后，你可能不得不设置一个小的超时，因为呈现延迟(但我不确定，因为我没有测试它)。

小开

function supportFullCss3()
{
var div = document.createElement("div");
div.style.display = 'flex';
var s1 = div.style.display == 'flex';
var s2 = 'perspective' in div.style;


return (s1 && s2);
};


function getZoomLevel()
{
var screenPixelRatio = 0, zoomLevel = 0;


if(window.devicePixelRatio && supportFullCss3())
screenPixelRatio = window.devicePixelRatio;
else if(window.screenX == '0')
screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
else
{
var scr = window.frames.screen;
screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
}


//---------------------------------------
if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
zoomLevel = "-7";
} else if (screenPixelRatio <= .25) {
zoomLevel = "-6";
}else if (screenPixelRatio <= .33) {
zoomLevel = "-5.5";
} else if (screenPixelRatio <= .40) {
zoomLevel = "-5";
} else if (screenPixelRatio <= .50) {
zoomLevel = "-4";
} else if (screenPixelRatio <= .67) {
zoomLevel = "-3";
} else if (screenPixelRatio <= .75) {
zoomLevel = "-2";
} else if (screenPixelRatio <= .85) {
zoomLevel = "-1.5";
} else if (screenPixelRatio <= .98) {
zoomLevel = "-1";
} else if (screenPixelRatio <= 1.03) {
zoomLevel = "0";
} else if (screenPixelRatio <= 1.12) {
zoomLevel = "1";
} else if (screenPixelRatio <= 1.2) {
zoomLevel = "1.5";
} else if (screenPixelRatio <= 1.3) {
zoomLevel = "2";
} else if (screenPixelRatio <= 1.4) {
zoomLevel = "2.5";
} else if (screenPixelRatio <= 1.5) {
zoomLevel = "3";
} else if (screenPixelRatio <= 1.6) {
zoomLevel = "3.3";
} else if (screenPixelRatio <= 1.7) {
zoomLevel = "3.7";
} else if (screenPixelRatio <= 1.8) {
zoomLevel = "4";
} else if (screenPixelRatio <= 1.9) {
zoomLevel = "4.5";
} else if (screenPixelRatio <= 2) {
zoomLevel = "5";
} else if (screenPixelRatio <= 2.1) {
zoomLevel = "5.2";
} else if (screenPixelRatio <= 2.2) {
zoomLevel = "5.4";
} else if (screenPixelRatio <= 2.3) {
zoomLevel = "5.6";
} else if (screenPixelRatio <= 2.4) {
zoomLevel = "5.8";
} else if (screenPixelRatio <= 2.5) {
zoomLevel = "6";
} else if (screenPixelRatio <= 2.6) {
zoomLevel = "6.2";
} else if (screenPixelRatio <= 2.7) {
zoomLevel = "6.4";
} else if (screenPixelRatio <= 2.8) {
zoomLevel = "6.6";
} else if (screenPixelRatio <= 2.9) {
zoomLevel = "6.8";
} else if (screenPixelRatio <= 3) {
zoomLevel = "7";
} else if (screenPixelRatio <= 3.1) {
zoomLevel = "7.1";
} else if (screenPixelRatio <= 3.2) {
zoomLevel = "7.2";
} else if (screenPixelRatio <= 3.3) {
zoomLevel = "7.3";
} else if (screenPixelRatio <= 3.4) {
zoomLevel = "7.4";
} else if (screenPixelRatio <= 3.5) {
zoomLevel = "7.5";
} else if (screenPixelRatio <= 3.6) {
zoomLevel = "7.6";
} else if (screenPixelRatio <= 3.7) {
zoomLevel = "7.7";
} else if (screenPixelRatio <= 3.8) {
zoomLevel = "7.8";
} else if (screenPixelRatio <= 3.9) {
zoomLevel = "7.9";
} else if (screenPixelRatio <= 4) {
zoomLevel = "8";
} else if (screenPixelRatio <= 4.1) {
zoomLevel = "8.1";
} else if (screenPixelRatio <= 4.2) {
zoomLevel = "8.2";
} else if (screenPixelRatio <= 4.3) {
zoomLevel = "8.3";
} else if (screenPixelRatio <= 4.4) {
zoomLevel = "8.4";
} else if (screenPixelRatio <= 4.5) {
zoomLevel = "8.5";
} else if (screenPixelRatio <= 4.6) {
zoomLevel = "8.6";
} else if (screenPixelRatio <= 4.7) {
zoomLevel = "8.7";
} else if (screenPixelRatio <= 4.8) {
zoomLevel = "8.8";
} else if (screenPixelRatio <= 4.9) {
zoomLevel = "8.9";
} else if (screenPixelRatio <= 5) {
zoomLevel = "9";
}else {
zoomLevel = "unknown";
}


return zoomLevel;
};

小开

zoom = ( window.outerWidth - 10 ) / window.innerWidth

这就是你所需要的。

小开

你可以试试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将给你的浏览器缩放百分比水平在非视网膜显示。对于高DPI/视网膜显示器，它将产生不同的值(例如，Chrome和Safari为200,Firefox为140)。

捕获缩放事件，您可以使用

$(window).resize(function() {
// your code
});

小开

截至2016年1月，我有一个解决方案。在Chrome, Firefox和MS Edge浏览器中测试工作。

其原理如下。收集2个相距很远的MouseEvent点。每个鼠标事件都带有屏幕和文档坐标。测量两个坐标系中两点之间的距离。虽然由于浏览器的特性，坐标系统之间有可变的固定偏移量，但如果页面没有缩放，点之间的距离应该是相同的。指定“远距”的原因(我把它设为12像素)是为了让小的变焦变化(例如90%或110%)可以被检测到。

< p >参考: https://developer.mozilla.org/en/docs/Web/Events/mousemove < / p >

步骤:

添加鼠标移动监听器

window.addEventListener("mousemove", function(event) {
// handle event
});

Capture 4 measurements from mouse events:

event.clientX, event.clientY, event.screenX, event.screenY

Measure the distance d_c between the 2 points in the client system
Measure the distance d_s between the 2 points in the screen system
If d_c != d_s then zoom is applied. The difference between the two tells you the amount of zoom.

N.B. Only do the distance calculations rarely, e.g. when you can sample a new mouse event that's far from the previous one.

Limitations: Assumes user will move the mouse at least a little, and zoom is unknowable until this time.

小开

基本上，我们有:

window.devicePixelRatio，它同时考虑了浏览器级缩放*以及系统缩放/像素密度 * -在Mac/Safari上缩放级别不考虑
媒体查询
vw/vh CSS单元
resize事件，在缩放级别更改时触发，导致窗口的有效大小更改

这对于正常的 UX应该足够了。如果你需要检测缩放级别，这可能是糟糕UI设计的标志。

音高变焦更难跟踪，目前还没有考虑。

小开

这个答案是基于user1080381的答案上devicePixelRatio返回错误的注释。

我发现在使用台式机、Surface Pro 3和Surface Pro 4时，这个命令在某些情况下也会错误地返回。

我发现它在我的桌面上是有效的，但是SP3和SP4给出的数字是不同的。

不过我注意到，SP3的缩放级别是我预期的1.5倍。当我查看显示设置时，SP3实际上被设置为150%，而不是我桌面上的100%。

因此，注释的解决方案应该是将返回的缩放级别除以当前所在机器的缩放比例。

我可以通过以下方法在Windows设置中获得比例:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

所以在我的SP3的情况下，这是这段代码在100%缩放时的样子:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

乘以user1080381的原始答案中的100，然后将得到100(%)的缩放。

小开

问题在于使用的显示器类型，4k显示器和标准显示器。Chrome是迄今为止最聪明的，能够告诉我们缩放级别是通过使用window.devicePixelRatio，显然它可以告诉像素密度是什么，并报告相同的数字，不管什么。

其他浏览器就没有这么多了。IE和Edge可能是最差的，因为它们处理缩放级别的方式大不相同。要在4k显示器上获得相同大小的文本，您必须选择200%，而不是标准显示器上的100%。

截至2018年5月，以下是我检测到的一些最流行的浏览器(Chrome、Firefox和IE11)的缩放级别。我让它告诉我缩放百分比是多少。对于IE，即使4k显示器实际为200%，它也报告为100%，但文本大小实际上是相同的。

这里有一把小提琴:https://jsfiddle.net/ae1hdogr/

如果有人愿意尝试其他浏览器并更新小提琴，那么请这样做。我的主要目标是让这3个浏览器能够检测到人们在使用我的web应用程序时使用的缩放系数是否大于100%，并显示一个提示，建议使用更小的缩放系数。

小开

在移动设备(Chrome for Android或Opera Mobile)上，您可以通过window.visualViewport.scale检测缩放。 https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API < / p >

在Safari上检测:document.documentElement.clientWidth / window.innerWidth(如果设备上没有缩放，则返回1)。

小开

在Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

小开

有它目前工作，但仍然需要由浏览器分开。在Chrome(75)和Safari(11.1)上测试成功(目前还没有找到FF的方法)。它还在视网膜显示器上获得正确的缩放值，并在调整大小事件时触发计算

    private pixelRatio() {
const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;


return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
}




private isChrome():boolean {
return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
}


private chrome() {
const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
return {
zoom: zoomChrome,
devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
};
}

小开

你可以使用可视化视口API:

window.visualViewport.scale;

它是标准的，在桌面和移动设备上都可以使用:浏览器支持。

小开

试试这个

alert(Math.round(window.devicePixelRatio * 100));

小开

这可以检测比例。

html代码:

<body id="blog">

js:

function scale(){
return Math.round(100/(d.getElementById('blog').offsetWidth/d.getElementById('blog').getBoundingClientRect().width))/100;
}

缩放因子和比例不要相互混淆。用户控制“缩放”;; “scale"是一个CSS转换。然而，11年10个月前，understack注意到:

基本上我想知道DIV在100%缩放时的尺寸。

这个是这样的。我将其与@media查询一起使用，以检测JavaScript中的设备缩放，即360x720可能应用0.5缩放;720 x360, 0.75。

var d=document;

小开

我使用了不同的方法，我创建了一个dom元素，高度和宽度固定为100px，位置固定，不透明度为0，基本上是一个隐藏元素。

然后我使用dom-to-image捕获这个元素作为图像，这听起来可能有点夸张，但我想要一个防弹的解决方案，我们已经在使用这个包，然后验证输出图像宽度，如果它返回110，缩放为110%，这是非常准确的。

const ORIGINAL_ZOOM_SIZE = 100;
async function isValidateZoomLevel() {
const base64Render = await domToImage({
ref: hiddenElementReference,
});
const pixleRatio = Math.round(window.devicePixelRatio);
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(ORIGINAL_ZOOM_SIZE === img.width / pixleRatio && ORIGINAL_ZOOM_SIZE === (img.height / pixleRatio));
img.onerror = reject;
img.src = base64Render;
});
}

小开

我修复了下面的代码。

HTML:

<div class="mt-5"
[ngStyle]="getStyles()">

TS:

getStyles() {
const screenWidth = screen.width;
const windowWidth = window.innerWidth;
if (windowWidth != screenWidth) {
const percentDifference = Math.ceil((screenWidth / windowWidth) * 100);
if (percentDifference > 100) {
this.bannerBackgroundImageSize = '20%, 74%';
} else if (percentDifference === 100) {
this.bannerBackgroundImageSize = '20%, 72%';
} else if (percentDifference >= 90 && percentDifference <= 99) {
this.bannerBackgroundImageSize = '25%, 70%';
} else if (percentDifference >= 80 && percentDifference <= 89) {
this.bannerBackgroundImageSize = '28%, 68%';
} else if (percentDifference >= 75 && percentDifference <= 79) {
this.bannerBackgroundImageSize = '29%, 67%';
} else if (percentDifference >= 67 && percentDifference <= 74) {
this.bannerBackgroundImageSize = '30%, 65%';
} else if (percentDifference >= 50 && percentDifference <= 66) {
this.bannerBackgroundImageSize = '30%, 61%';
} else if (percentDifference < 50) {
this.bannerBackgroundImageSize = '30%, 58%';
}
} else {
this.bannerBackgroundImageSize = '20%, 72%';
}
const myStyles = {
'background-size': this.bannerBackgroundImageSize,
};
return myStyles;
}

我希望这将适用于所有缩放级别，它可以考虑与所有风格。