javascript – 获取浏览器窗口位置,无论缩放

如何获取浏览器窗口的左边缘(包括菜单,边框,标题等),而不是“固定”以考虑缩放级别? (This question解决了基本问题,但不考虑缩放)。

window.screenLeft或window.screenX在Chrome和Safari上工作正常,但这些报告使用IE6,IE8和Firefox报告“修复”的值。

我认为我可以更加可靠地获得屏幕的大小,也许可以使用这个或screen.deviceXDPI来确定缩放系数,但是我不知道如何使用它来更正位置。

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

编辑

我应该提到两件事情:

>我在询问浏览器缩放,您通常可以从“视图”菜单访问,或者按住Ctrl键并转动鼠标滚轮。因为大多数网页都不能很好地响应(例如)默认字体大小的更改,而不影响其布局,浏览器会通过缩放所有测量(包括像素)来实现缩放。为了使事情保持一致,他们还会缩小客户端和窗口大小,鼠标位置等。对我而言,我想要的是真正的(非标尺)措施。
>我正在寻找一个JavaScript解决方案。

你看过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;

我在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>
http://stackoverflow.com/questions/3929295/get-browser-window-position-regardless-of-zoom

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 获取浏览器窗口位置,无论缩放