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

310

  1. 如何在所有现代浏览器中检测页面缩放级别？尽管此线程说明了如何在IE7和IE8中执行此操作，但我找不到很好的跨浏览器解决方案。

  2. Firefox存储页面缩放级别以供将来访问。在首页加载时，我能否获得缩放级别？加载页面后发生缩放更改时，我在某处阅读过它可以工作。

  3. 有没有办法捕获'zoom'事件？

我需要这样做，因为我的一些计算是基于像素的，并且缩放时它们可能会波动。

@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>
javascript  browser  zoom  detection 
— 叠底
source
1
基本上，我想知道100％缩放时DIV的尺寸。
— understack
4
基本上没有办法在2019年检测缩放：我已经在Mac Catalina的Chrome 78上测试了以下所有解决方案，但没有一个起作用。
— collimarco

Answers:

274

现在，这比第一次提出这个问题时更大。通过阅读我能找到的所有答复和博客文章，这里是一个摘要。我还设置了此页面，以测试所有这些测量缩放级别的方法。

编辑（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/媒体查询屏幕宽度（请参见下文）（利用了screen.width使用设备像素但MQ宽度使用CSS像素这一事实-感谢Quirksmode width ）
  • FF3.6：未知方法
  • FF4 +：媒体查询二进制搜索（请参见下文）
  • WebKit：https : //www.chromestatus.com/feature/5737866978131968（感谢Teo的评论）
  • WebKit：使用来测量div的首选大小-webkit-text-size-adjust:none。
  • 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/ position:fixed; width:100%div的宽度。从这里开始（Quirksmode的 widths 表说这是一个bug； 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>
— 永然
source
1
很好的工作，尽管这在IE 8.0.7601.17514（最新）中对我不起作用。是否有机会将所有这些包装在一个适用于所有浏览器的函数getZoom（）中？也许还以jQuery插件的形式发布？再好的工作。
— ripper234
1
@yonran很棒的插件！，但是它在IE9中不起作用，应该zoom: screen.deviceXDPI / screen.logicalXDPI,改为zoom: screen.systemXDPI / screen.logicalXDPI,
— Daniel
1
@RobW，当我第一次为Firefox 4编写此代码时，Firefox没有matchMedia。保罗·爱尔兰（Paul Irish）也写了一个类似的matchMedia polyfill，它是Modernizr的一部分。
— yonran 2013年
7
大家好消息！他们最终做到了！Vieport API！chromestatus.com/feature/5737866978131968 我测试了，好东西！
— 张二
3
Viewport API仅适用于捏缩放；如果在桌面上缩放，则表示比例为1。@Jason T Featheringham除了“歧视”之外，还有其他一些原因想要了解缩放级别。域的所有页面上都设置了缩放，但是您可能想要在游戏页面或扩展弹出窗口中使用与在帮助页面中不同的处理方式。
— Pudica '18
61

你可以试试

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

这将为您提供浏览器在非视网膜显示器上的缩放百分比级别。对于高DPI /视网膜显示，它将产生不同的值（例如，Chrome和Safari为200，Firefox为140）。

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

$(window).resize(function() { 
// your code 
});
— 用户1080381
source
1
在移动设备上也完美运行。看看什么移动设备有什么也很有趣devicePixelRatio。当发生缩放事件或更改的初始值时，这也极大地帮助我将fixed元素切换为absolutely定位的元素devicePixelRatio。完善！谢谢！！
— lowtechsun
12
无法正常运行：浏览器未缩放时，在带视网膜的MacBook上的Chrome中返回200。
— Terite
19
使用此类显示时，支持高DPI屏幕的浏览器将不会给出预期的结果，无论显示如何，Safari都不会给出预期的结果。
— Fredrik C
只是对于任何关心的人，在IE上这仅适用于IE11（它将在IE10或更低版本上返回NaN）
— scunliffe
3
Math.round(window.devicePixelRatio * 100)适用于Chrome，IE，Edge和Firefox。Safari的iMac上总是返回200
— 超级玉
45

对我来说，对于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";
}
— 用户名
source
1
非常好。而且，如果您只需要知道它是否在Chrome中缩放，则可以：isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— Brent Faust
1
好吧，window.outerWidth也随缩放而改变。此外，并非在每个操作系统上，窗口边框宽度都是8像素（即使在同一操作系统上，设计也会有所不同）。但是我建议减去16，而不是8，因为您两次都有窗口边框。另外，某些浏览器在其实际渲染窗口上有边框（例如FF），有些则没有（Safari）-但这甚至取决于您使用浏览器的操作系统（例如Safari在Windows上带有边框）。备份初始innerWidth（例如在页面加载时）并使用它进行比较可以更好地工作，但前提是初始缩放为100％...
— StanE 2014年
1
无论我做什么，输出0（2017年2月）。
— Tiberiu-Ionuț Stan
1
switch语句可能比许多其他语句更好。
— Edric '18
它不起作用：只是在Mac上的Chrome上进行了测试，无论缩放级别如何，它始终会返回相同的比率
— collimarco
16

我和我的同事使用了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);
— 周杰伦
source
现在，此方法始终在Firefox 29中报告svg.currentScale =1。可能是因为它们基于缩放来调整整个屏幕数字的大小，这是一个bug。IE11在桌面上似乎也有同样的问题，因为屏幕高度已调整为视口devicePixelRatio，这非常搞砸。
— hexalys 2014年
11

我发现这篇文章很有帮助。非常感谢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解决方案（它们也是单行），我能够检测到绝大多数浏览器的缩放情况，而这些浏览器仅用几行代码就达到了我们的应用程序。

— 布赖恩
source
4
您能否提供一个代码，该代码如何使用媒体查询检测实际缩放？
— TN。
尝试仅使用“（宽度：<X> px）和（高度：<Y> px）”，其中<X>和<Y>分别是window.innerWidth和window.innerHeight。即使很小的变焦也能用。也可以在Safari中使用。
— 最高
@max能否提供一个JSFIddle或示例代码，将其组合在一起？
— lowtechsun
在Macbook Pro等视网膜设备上始终报告为true。
— 马修·桑德斯
codepen.io/anon/pen/LgrGjJ显示了带有媒体查询的二进制搜索，但这与查询相同devicePixelRatio：它考虑了显示缩放。
— ZachB '18 -10-19
7

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

原理如下。收集相距较远的2个MouseEvent点。每个鼠标事件都带有屏幕和文档坐标。测量两个坐标系中两个点之间的距离。尽管由于浏览器的不同，坐标系之间存在可变的固定偏移量，但是如果页面未缩放，则点之间的距离应该相同。指定“相距较远”（我将其设为12像素）的原因是，可以检测到较小的缩放变化（例如90％或110％）。

参考： https //developer.mozilla.org/en/docs/Web/Events/mousemove

脚步：

  1. 添加鼠标移动监听器

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

  2. 从鼠标事件捕获4个测量值：

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

  3. 在客户端系统中测量两点之间的距离d_c

  4. 测量屏幕系统中两点之间的距离d_s

  5. 如果d_c！= d_s，则应用缩放。两者之间的差异告诉您缩放程度。

注意：仅很少进行距离计算，例如，当您可以采样一个新鼠标事件而不是上一个鼠标事件时。

限制：假设用户将鼠标至少移动一点，并且直到此时才知道缩放。

— 用户名
source
1
我创建了一个小提琴：jsfiddle.net/Terite/9b6ko854，“远距”是100像素。不幸的是，它在带有视网膜显示屏的MacBook上的Firefox（52）上无法正常工作。还要注意的是，在Chrome，Firefox和IE11中检测到Window 7界面缩放为125％（缩放为默认值的125％）作为浏览器缩放。
— Terite
您的小提琴为我工作，并在Linux下使用Firefox和Chrome进行了测试：)
— user1191311
视网膜显示器增加了另一个难度，因为它们会错误地报告像素大小等。
— user1191311
3

在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中不存在缩放，因此没有必要检查缩放。

— ch
source
1
有趣。对我来说，它始终显示80％的缩放比例。。。我相信这是因为我在Windows 7级别设置了大字体（在控制面板中搜索“字体大小”）。它比@yonran回答中的IE8解决方案更好，后者对我来说根本不起作用。jsbin.com/obowof
— ripper234 '10
缩放设置为100％时，我得到101％。
— 艾伦·华莱士
我也是。使用0.4999而不是0.9
— yan bellavance
ieZoomLevel =（（screen.deviceXDPI / screen.systemXDPI）* 100 + 0.4999）.toFixed（）;
— yan bellavance
3

我想出的是：

1）position:fixed <div>使用width:100%（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：这是我的第一篇文章，对不起任何错误

— 阿比舍克·波拉尔（Abhishek Borar）
source
3
不幸的是，这只有在用户使浏览器最大化时才起作用（screen.availWidth以屏幕像素而不是浏览器窗口报告屏幕宽度）。
— Bailey Parker
3

在基于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;
— 鲁道夫
source
5
document.width返回未定义
— Adam
无论缩放如何，始终返回true（2017、2月，视网膜显示）。
— Tiberiu-Ionuț Stan
3

基本上，我们有：

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

对于普通的 UX 应该足够了。如果您需要检测缩放级别，则可能是UI设计不良的标志。

音调缩放较难追踪，目前尚未考虑。

— 钻进
source
1
window.devicePixelRatio是一个很好的答案，可以在最新版本的主流浏览器中使用
— -Chrome
@kirilloid您是否找到可以用来可靠地在Safari中找到“缩放级别”的内容？
— onassar
1

您的计算仍然基于许多CSS像素。它们现在在屏幕上的大小不同。这就是整页缩放的重点。

您希望在192dpi设备上的浏览器上发生什么，因此通常为图像中的每个像素显示四个设备像素？现在，该设备以50％的缩放比例在一个设备像素中显示一个图像像素。

— 尼尔
source
@Neil：如何获得“ CSS像素”尺寸？
— understack
CSS默认为点，但是您当然可以使用px尺寸修饰符指定像素。至于在JavaScript中检索的元素属性，这些属性应该已经在CSS像素中。因此，如果将<div>的宽度指定为100px，那么无论缩放级别如何，这都是从JavaScript中获得的结果。
— 尼尔，
0

没有针对IE进行测试，但是如果您elem使用

min-width: 100%

然后 

window.document.width / elem.clientWidth

将为您提供浏览器的缩放级别（包括document.body.style.zoom系数）。

— 德克·范·奥斯特博斯
source
经过测试，但放大似乎并没有增加elem.clientWidth
— 汤姆
0

这是Chrome浏览器，在之后user800583答案 ...

我花了几个小时解决这个问题，但找不到更好的方法，但是：

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

所以我来以下...

但是这种方法有局限性：例如，如果您在应用程序窗口中播放手风琴（迅速放大和缩小窗口的宽度），则尽管缩放比例没有变化（可能未更改externalWidth和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 ]
);
— um
source
我在使用“ window.outerWidth / window.innerWidth”时遇到了问题，也给了我错误的值，这可能是因为我在iframe中。所以我要做的是使用父窗口，它给出了正确的答案：window.parent.window.outerWidth / window.parent.window.innerWidth
— yan bellavance
0

我只有移动设备有此解决方案（已通过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());

});

如果您想要在缩放移动后立即缩放级别，则可能由于渲染延迟而不得不设置一些超时（但是我不确定，因为我没有对其进行测试）。

— 微核
source
0

该答案是基于有关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（％）的缩放比例。

— 卡梅伦·韦弗
source
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()
    };
  }
— 瑜伽士
source
-1

在这里它不会改变！：

<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）

@tfl：这是因为您已经以内联样式固定了宽度。我已修改您的示例以显示我的情况（在原始问题中发布）。
— understack
-1

这可能会或可能不会帮助任何人，但是无论我尝试了什么CSS技巧，我都有一个页面无法正确居中，因此我编写了一个JQuery文件调用Center页面：

浏览器的缩放级别发生了问题，页面会根据您是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);
    }
}
— 用户名
source
-1

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

截至目前：对于Firefox / Chrome / IE8和IE9，放大和缩小触发window.resize事件。可以使用以下方法捕获：

$(window).resize(function() {
//YOUR CODE.
});
— 普密·辛格（Bhumi Singhal）
source
-1

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);
— 词库
source
在配备视网膜显示屏的MacBook上，Firefox（52）无法正常运行–如果未缩放，则返回2。我创建了一个小提琴：jsfiddle.net/Terite/wadkh3ea
— Terite
-1 
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;
};
— 阿里
source
6
请也说明您的代码如何工作。如果某些新手找到了答案，那将很有帮助。
— displayName 2015年
我创建了一个小提琴：jsfiddle.net/Terite/5n1bk9do作为@AlexeySh。提到过，它无法在Chrome（56），Firefox（52）的视网膜显示屏上正常工作。Safari（10）上的缩放比例也显示为0。
— Terite
-1

问题出在所用显示器的类型上，即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应用程序，并显示建议出租人缩放比例的通知。

— Bill_VA
source
Mac Book Pro（视网膜屏幕）上的Safari返回0，非视网膜屏幕上的Chrome正确返回，似乎是
— 100、90
在Chrome和Firefox视网膜屏幕上返回200
— OZZIE
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.