獲取瀏覽器窗口的位置，無論縮放

如何獲取瀏覽器窗口的左邊緣（包括菜單，邊框，標題等），而不是「固定」以考慮縮放級別？（This question解決了基本問題，但不考慮縮放。）。獲取瀏覽器窗口的位置，無論縮放

window.screenLeft或window.screenX在Chrome和Safari上運行良好，但這些報告使用IE6，IE8和Firefox報告「固定」值。

我已經考慮過我可以更可靠地獲得屏幕尺寸，也許使用screen.deviceXDPI來確定縮放係數，但我不知道如何使用它來糾正位置。

（有些人可能想知道我爲什麼要這樣做，這是因爲一個培訓網站在用戶屏幕的右側打開了一個瀏覽器窗口，瀏覽器使用腳本標記hack與我的應用程序通信該應用程序想要所以它完全適合瀏覽器窗口的左側，以調整自身）

編輯

我應該提到兩兩件事：

我問的是瀏覽器縮放那您通常可以從View m訪問enu或按住Ctrl並轉動鼠標滾輪。由於大多數網頁都不能很好地響應（例如）默認字體大小的變化而不會影響其佈局，所以瀏覽器通過縮放所有度量（包括像素）來實現縮放。爲了保持一致，它們還可以縮放報告的客戶端和窗口大小，鼠標位置等。麻煩對我來說是我想要的是真正的（未縮放的）度量。
我正在尋找JavaScript解決方案。

來源

2010-10-14 Oliver Bock

-2

如果你正在尋找做一個全屏幕應用程序你有沒有考慮這一點： An expanding middle in CSS

看一看在LiveDemo爲接受的答案。這個解決方案可以很好地補償由於縮放造成的任何影響。

來源

2011-03-06 23:54:36

對不起，不希望做一個全屏幕應用程序。試圖找出瀏覽器窗口的位置。 – 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>

來源

2016-08-08 23:20:50 YellowBird

獲取瀏覽器窗口的位置，無論縮放

回答

相關問題