无论缩放如何，获取浏览器窗口位置

发布于 2024-09-27 20:42:19 字数 670 浏览 2 评论 0原文

如何获取浏览器窗口的左边缘（包括菜单、边框、标题等），而不将其“固定”以考虑缩放级别？（此问题解决基本问题，但不考虑缩放。）。

window.screenLeft 或 window.screenX 在 Chrome 和 Safari 上工作正常，但它们使用 IE6、IE8 和 Firefox 报告“固定”值。

我认为我可以更可靠地获取屏幕的尺寸，也许可以使用它或 screen.deviceXDPI 确定缩放系数，但我不确定如何使用它来纠正位置。

（你们中的一些人可能想知道为什么我要这样做。这是因为培训网站会在用户屏幕的右侧打开一个浏览器窗口。浏览器使用脚本标记 hack 与我的应用程序进行通信。应用程序想要调整自身大小，使其完全适合浏览器窗口的左侧。）

编辑

我应该提到两件事：

我问的是浏览器缩放，您通常可以从“视图”菜单或按住 Ctrl 并转动鼠标滚轮进行访问。由于大多数网页无法很好地响应（例如）默认字体大小的变化而不破坏其布局，因此浏览器通过缩放所有测量（包括像素）来实现缩放。为了保持一致，他们还缩放报告的客户端和窗口大小、鼠标位置等。对我来说，麻烦是我想要真实的（未缩放的）测量值。
我正在寻找 JavaScript 解决方案。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恋你朝朝暮暮 2024-10-04 20:42:19

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

我们可以使用 window.devicePixelRatio 或建议的二分搜索方法来确定像素比率。然后我们用这个因子缩放 window.screenX 和 window.screenY：

var X = window.screenX * pixelratio;
var Y = window.screenY * pixelratio;

我在 Firefox 48 中对此进行了测试，当更改缩放级别时，窗口位置最多改变 2 个像素。使用window.devicePixelRatio或二分搜索给出了基本相同的结果。我想对于图形应用程序来说，相差 2 个像素确实很烦人，但确定缩放级别似乎很混乱。

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input id="button" type="button" value="Click me!"/>
    <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);
            }
        };

</script>
<script type="text/javascript">    
    var b = document.getElementById("button");
    b.onclick = function() {
        var pixelratio = mediaQueryBinarySearch(
	    'min--moz-device-pixel-ratio', '', 0, 6000, 25, .00001);

        console.log("devicePixelRatio:", window.screenX * window.devicePixelRatio, window.screenY * window.devicePixelRatio);
        console.log("binary search:", window.screenX * pixelratio, window.screenY * pixelratio);
        console.log(Math.abs(pixelratio - window.devicePixelRatio));
    }
  </script>
  </body>
</html>

Have you seen How to detect page zoom level in all modern browsers?

We can use window.devicePixelRatio or the binary search method suggested there to determined the pixel ratio. Then we scale window.screenX and window.screenY with this factor:

var X = window.screenX * pixelratio;
var Y = window.screenY * pixelratio;

I tested this in Firefox 48 and the window position changed with at most 2 pixels when changing the zoom level. Using window.devicePixelRatio or the binary search gave essentially the same results. I guess being 2 pixels off can be really annoying for graphical applications, but determining the zoom level seems to be messy.

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input id="button" type="button" value="Click me!"/>
    <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);
            }
        };

</script>
<script type="text/javascript">    
    var b = document.getElementById("button");
    b.onclick = function() {
        var pixelratio = mediaQueryBinarySearch(
	    'min--moz-device-pixel-ratio', '', 0, 6000, 25, .00001);

        console.log("devicePixelRatio:", window.screenX * window.devicePixelRatio, window.screenY * window.devicePixelRatio);
        console.log("binary search:", window.screenX * pixelratio, window.screenY * pixelratio);
        console.log(Math.abs(pixelratio - window.devicePixelRatio));
    }
  </script>
  </body>
</html>

回复收藏 0 原文