logo标签列表

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

javascriptbrowsercross-browserzooming
17
如何获取浏览器窗口的左边缘（包括菜单、边框、标题等），而不将其“固定”以考虑缩放级别？（这个问题 回答了基本问题，但没有考虑缩放。）
window.screenLeft 或 window.screenX 在 Chrome 和 Safari 上运行良好，但在 IE6、IE8 和 Firefox 中报告“固定”值。
我已经考虑到可以更可靠地获取屏幕大小，并使用 screen.deviceXDPI 确定缩放因子，但我不确定如何使用它来纠正位置。
（你们中的一些人可能想知道为什么我想这样做。这是因为一个培训网站在用户屏幕的右侧打开一个浏览器窗口。浏览器使用脚本标记黑客与我的应用程序进行通信。应用程序想要调整自己的大小，以便完全适合浏览器窗口的左侧。）
编辑
我应该提到两件事：
1. 我正在询问您通常可以从 View 菜单或按住 Ctrl 并转动鼠标滚轮访问的浏览器缩放。由于大多数网页无法很好地响应（例如）默认字体大小的更改而不弄乱其布局，因此浏览器通过缩放所有测量值（包括像素）来实现缩放。为保持一致，它们还会缩放报告的客户端和窗口大小、鼠标位置等。对我而言麻烦的是，我想要真实的（未缩放的）度量。
2. 我正在寻找 JavaScript 解决方案。
2个回答
4

你看过如何检测所有现代浏览器中的页面缩放级别？吗？

我们可以使用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>

-2
如果您正在寻找创建全屏应用程序的方法，您考虑过这个吗： CSS 中的可伸缩中间部分 请查看已接受答案的LiveDemo。该解决方案优雅地弥补了由于缩放而产生的任何影响。
抱歉，不打算制作一个全屏应用程序。只是想找出浏览器窗口的位置。 - Oliver Bock
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接