如何检测所有现代浏览器中的页面缩放级别？
如何检测所有现代浏览器中的页面缩放级别？虽然这个线程告诉如何在 IE7 和 IE8 中执行此操作，但我找不到一个好的跨浏览器解决方案。 Firefox 存储页面缩放级别以供将来访问。在第一页加载时，我可以获得缩放级别吗？我在某处读到它在页面加载后发生缩放更改时起作用。有没有办法捕获“缩放”事件？
我需要这个，因为我的一些计算是基于像素的，并且在缩放时它们可能会波动。
@tfl 给出的修改样本
此页面在缩放时会提醒不同的高度值。 [jsFiddle]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
</head>
<body>
<div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
<button onclick="alert($('#xy').height());">Show</button>
</body>
</html>
现在它比第一次提出这个问题时更加混乱。通过阅读我能找到的所有回复和博客文章，这是一个摘要。我还设置了 this page to test all these methods of measuring the zoom level。
编辑 (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();返回（r.left-r.right）/body.offsetWidth； （感谢这个例子或这个答案）
仅限 FF3.5：screen.width / 媒体查询屏幕宽度（见下文）（利用 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 （来自这个答案）
Opera: document.documentElement.offsetWidth / 一个位置的宽度:fixed;宽度：100% 格。从这里开始（Quirksmode 的宽度表说这是一个错误；innerWidth 应该是 CSS px）。我们使用 position:fixed 元素来获取视口的宽度，包括滚动条所在的空间； document.documentElement.clientWidth 不包括此宽度。这自 2011 年的某个时候就被打破了；我不再知道如何在 Opera 中获得缩放级别。
其他：Sebastian 的 Flash 解决方案
不可靠：监听鼠标事件并测量 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>
你可以试试
var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
这将为您提供非视网膜显示器上的浏览器缩放百分比级别。对于高 DPI/视网膜显示器，它将产生不同的值（例如，Chrome 和 Safari 为 200，Firefox 为 140）。
要捕捉缩放事件，您可以使用
$(window).resize(function() {
// your code
});
devicePixelRatio也很有趣。这也极大地帮助了我在缩放事件发生时或当 devicePixelRatio 的初始值发生变化时将 fixed 元素切换为absolute定位的元素。完美的！谢谢！！
Math.round(window.devicePixelRatio * 100) 适用于 Chrome、IE、Edge 和 Firefox。 iMac 上的 Safari 总是返回 200。
对我来说，对于 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";
}
isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
switch 语句可能比许多 if else 语句更好。
我和我的同事使用了来自 https://github.com/tombigel/detect-zoom 的脚本。此外，我们还动态创建了一个 svg 元素并检查其 currentScale 属性。它在 Chrome 和可能的大多数浏览器上运行良好。不过，在 FF 上，“仅缩放文本”功能必须关闭。 SVG 在大多数浏览器上是 supported。在撰写本文时，已在 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);
我发现这篇文章非常有帮助。非常感谢 yonran。我想传递一些我在实施他提供的一些技术时发现的额外知识。在 FF6 和 Chrome 9 中，添加了对来自 JS 的媒体查询的支持，这可以大大简化确定 FF 放大所需的媒体查询方法。请参阅 MDN here 上的文档。为了我的目的，我只需要检测浏览器是放大还是缩小，我不需要实际的缩放系数。我能够用一行 JavaScript 得到答案：
var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
将其与同样是单行代码的 IE8+ 和 Webkit 解决方案结合起来，我只需几行代码就能够检测到大多数浏览器对我们应用程序的缩放。
devicePixelRatio 相同：它考虑了显示缩放。
zoom = ( window.outerWidth - 10 ) / window.innerWidth
这就是你所需要的。
outerWidth 中减去 10？
截至 2016 年 1 月，我有一个解决方案。在 Chrome、Firefox 和 MS Edge 浏览器中测试工作。
原理如下。收集 2 个相距较远的 MouseEvent 点。每个鼠标事件都带有屏幕和文档坐标。测量两个坐标系中两点之间的距离。尽管由于浏览器的原因，坐标系之间存在可变的固定偏移，但如果页面不缩放，点之间的距离应该相同。指定“相距很远”（我将其设为 12 像素）的原因是可以检测到小的缩放变化（例如 90% 或 110%）。
参考：https://developer.mozilla.org/en/docs/Web/Events/mousemove
脚步：
添加鼠标移动监听 window.addEventListener("mousemove", function(event) { // 处理事件 });从鼠标事件中捕获 4 个测量值：event.clientX、event.clientY、event.screenX、event.screenY 测量客户端系统中 2 点之间的距离 d_c 测量屏幕系统中 2 点之间的距离 d_s 如果 d_c != d_s 然后应用缩放。两者之间的差异告诉您缩放量。
NB 只做距离计算很少，例如当你可以采样一个远离前一个的新鼠标事件时。
限制：假设用户将鼠标移动至少一点，直到此时缩放是不可知的。
您可以使用 Visual Viewport API：
window.visualViewport.scale;
它是标准的，适用于桌面和移动设备：browser support。
我想出的是：
1) 用 width:100% 创建一个 position:fixed <div> (id=zoomdiv)
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>
PS：这是我的第一篇文章，如有错误请见谅
screen.availWidth 报告屏幕宽度（以屏幕像素为单位，而不是浏览器窗口）。
基本上，我们有：
window.devicePixelRatio 考虑了浏览器级别的缩放*以及系统缩放/像素密度。 * — 在 Mac/Safari 上不考虑缩放级别
媒体查询
vw/vh CSS 单位
resize 事件，在缩放级别更改时触发，导致窗口的有效大小发生更改
对于普通的用户体验来说，这应该足够了。如果您需要检测可能是不良 UI 设计的标志的缩放级别。
Pitch-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 中不存在缩放，因此无需检查缩放。
这在基于 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;
document.width 返回未定义
在 Chrome 上
var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
尝试这个
alert(Math.round(window.devicePixelRatio * 100));
在 移动 设备（使用 Android 版 Chrome 或 Opera Mobile）上，您可以通过 window.visualViewport.scale 检测缩放。 https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
在 Safari 上检测：document.documentElement.clientWidth / window.innerWidth（如果设备上没有缩放则返回 1）。
visualViewport.scale 显示捏缩放，但不显示页面实际缩放。
您的计算仍然基于许多 CSS 像素。它们现在只是屏幕上的不同尺寸。这就是整页缩放的重点。
您希望在 192dpi 设备上的浏览器上发生什么，因此通常为图像中的每个像素显示四个设备像素？在 50% 缩放时，此设备现在在一个设备像素中显示一个图像像素。
没有针对 IE 进行测试，但是如果您使用 elem 制作元素
min-width: 100%
然后
window.document.width / elem.clientWidth
将为您提供浏览器缩放级别（包括 document.body.style.zoom 因子）。
这适用于 Chrome，在 user800583 answer ...
我在这个问题上花了几个小时并没有找到更好的方法，但是：
有 16 个“缩放级别”而不是 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 ]
);
我有这个仅适用于移动设备的解决方案（使用 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());
});
如果您希望在捏合移动后立即缩放级别，您可能需要设置一点超时，因为渲染延迟（但我不确定，因为我没有测试它）。
此答案基于有关 devicePixelRatio 在 user1080381 的答案中错误返回的评论。
我发现在使用桌面、Surface Pro 3 和 Surface Pro 4 时，此命令在某些情况下也会错误地返回。
我发现它可以在我的桌面上运行，但是 SP3 和 SP4 给出的数字彼此和桌面不同。
虽然我注意到 SP3 的缩放级别是我预期的 1 倍半。当我查看显示设置时，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 (%) 的缩放。
它目前是否正常工作，但仍需要通过浏览器分隔。在 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()
};
}
这检测规模。
html代码：
<body id="blog">
js：
function scale(){
return Math.round(100/(d.getElementById('blog').offsetWidth/d.getElementById('blog').getBoundingClientRect().width))/100;
}
缩放系数和比例不要相互混淆。用户控制“缩放”； “缩放”是一个 CSS 转换。然而，11 年零 10 个月前，understack 指出：
基本上我想知道 100% 缩放时 DIV 的尺寸。
这是这样做的。我将它与@media 查询结合使用以检测 JavaScript 设备缩放，即 360x720 可能应用 0.5 缩放； 720x360，0.75。
var d=document;
我使用了另一种方法，我创建了一个固定高度和宽度为 100 像素、位置固定和不透明度为 0 的 dom 元素，基本上是一个隐藏元素。
然后我使用 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;
});
}
这可能对任何人都有帮助，也可能对任何人没有帮助，但是无论我尝试什么 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 事件。这可以使用以下方法捕获：
$(window).resize(function() {
//YOUR CODE.
});
FireFox 16+ 纯粹使用 JavaScript 查找 DPPX（缩放级别）的解决方法：
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);
问题在于使用的显示器类型，4k 显示器与标准显示器。 Chrome 是迄今为止最聪明的，它能够通过使用 window.devicePixelRatio 告诉我们缩放级别是多少，显然它可以告诉我们像素密度是多少，并报告相同的数字。
其他浏览器，没有那么多。 IE 和 Edge 可能是最差的，因为它们处理缩放级别的方式大不相同。要在 4k 显示器上获得相同大小的文本，您必须选择 200%，而不是在标准显示器上选择 100%。
截至 2018 年 5 月，我必须为一些最流行的浏览器（Chrome、Firefox 和 IE11）检测缩放级别。我有它告诉我缩放百分比是多少。对于 IE，即使 4k 显示器实际上是 200%，它也会报告 100%，但文本大小实际上是相同的。
这是一个小提琴：https://jsfiddle.net/ae1hdogr/
如果有人愿意尝试其他浏览器并更新小提琴，那么请这样做。我的主要目标是覆盖这 3 个浏览器，以检测人们是否使用大于 100% 的缩放系数来使用我的 Web 应用程序，并显示提示出租缩放系数的通知。
在这里它不会改变！：
<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）
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;
};
else if
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
zoom: screen.deviceXDPI / screen.logicalXDPI,而不是zoom: screen.systemXDPI / screen.logicalXDPI,matchMedia。 Paul Irish 还写了一个 similar matchMedia polyfill，它是 Modernizr 的一部分。