代码之家 › 专栏 › 技术社区 › Oliver Bock

获取浏览器窗口位置而不考虑缩放

zoom cross-browser browser javascript

Oliver Bock · 技术社区 · 14 年前

我怎样才能得到浏览器窗口的左边缘(包括菜单、边框、标题等),而不考虑缩放级别?( This question

我考虑过我可以更可靠地获得屏幕的大小,也许可以用它来确定缩放系数或screen.deviceXDPI,但我不确定我将如何用它来纠正立场。

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

我应该提到两件事:

我询问浏览器缩放,您通常可以从视图菜单访问,或者按住Ctrl键并转动鼠标滚轮。由于大多数网页在不影响布局的情况下(例如)默认字体大小的更改都无法很好地响应,浏览器通过缩放实现缩放 全部的 测量,包括像素。为了保持一致,他们还缩放报告的客户端和窗口大小、鼠标位置等。对我来说,麻烦是我想要真实的(未缩放的)度量。

2 回复 | 直到 8 年前

Community CDub 8 年前

你看到了吗 How to detect page zoom level in all modern browsers?

window.devicePixelRatio window.screenX 和 window.screenY 考虑到这个因素:

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

我在firefox48中测试了这一点,当改变缩放级别时,窗口位置最多改变了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

Community CDub 8 年前

如果您希望制作全屏应用程序,您是否考虑过: An expanding middle in CSS

看看 现场演示 为了得到公认的答案。此解决方案优雅地补偿了由于缩放而产生的任何效果。