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

问题描述：

如何获取浏览器窗口的左边缘（包括菜单，边框，标题等），而不是“固定”以考虑缩放级别？（This question解决了基本问题，但不考虑缩放。）。获取浏览器窗口的位置，无论缩放

window.screenLeft或window.screenX在Chrome和Safari上运行良好，但这些报告使用IE6，IE8和Firefox报告“固定”值。

我已经考虑过我可以更可靠地获得屏幕尺寸，也许使用screen.deviceXDPI来确定缩放系数，但我不知道如何使用它来纠正位置。

（有些人可能想知道我为什么要这样做，这是因为一个培训网站在用户屏幕的右侧打开了一个浏览器窗口，浏览器使用脚本标记hack与我的应用程序通信该应用程序想要所以它完全适合浏览器窗口的左侧，以调整自身）

编辑

我应该提到两两件事：

我问的是浏览器缩放那您通常可以从View m访问enu或按住Ctrl并转动鼠标滚轮。由于大多数网页都不能很好地响应（例如）默认字体大小的变化而不会影响其布局，所以浏览器通过缩放所有度量（包括像素）来实现缩放。为了保持一致，它们还可以缩放报告的客户端和窗口大小，鼠标位置等。麻烦对我来说是我想要的是真正的（未缩放的）度量。
我正在寻找JavaScript解决方案。

答

如果你正在寻找做一个全屏幕应用程序你有没有考虑这一点： An expanding middle in CSS

看一看在LiveDemo为接受的答案。这个解决方案可以很好地补偿由于缩放造成的任何影响。

对不起，不希望做一个全屏幕应用程序。试图找出浏览器窗口的位置。 – 2012-02-28 22:30:17

答

你见过How to detect page zoom level in all modern browsers?

我们可以用window.devicePixelRatio或二进制搜索方法建议有没有判断的像素比例。然后，我们规模window.screenX和window.screenY这个因素：

我在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 + 
 
\t \t   \t ') {#dummyElement ' + 
 
\t \t \t   '{text-decoration: underline} }', 0); 
 
      var matched = getComputedStyle(dummyElement, null).textDecoration 
 
\t   == '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)) { 
 
\t    return mediaQueryBinarySearch(property, unit, mid, b, maxIter-1, epsilon); 
 
      } else { 
 
\t    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(
 
\t  '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>

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

相关推荐