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

如何在所有现代浏览器中检测页面缩放级别?虽然这篇文章讲述了如何在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>

当前回答

这可以检测比例。

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;

2021-09-15 11:26:10

其他回答

对我来说，Chrome/Webkit，文档。width / jQuery(document).width()不能正常工作。当我把我的窗口变小，并放大到我的网站，这样水平滚动条出现，文档。width / jQuery(document).width()在默认缩放时不等于1。这是因为文档。宽度包括视口之外的部分文档。

使用窗口。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";
}

2011-06-15 23:56:42

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

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

2009-12-04 22:32:48

这是针对Chrome的，在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 ]
);

2013-05-31 23:28:11

我的同事和我使用了来自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);

2013-04-18 19:17:30

你可以试试

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

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

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

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

2016-06-14 14:34:37

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

推荐文章

最新文章

标签