Question

如何在不考虑缩放级别的情况下“固定”浏览器窗口的左边缘（包括菜单，边框，标题等）？（This question解决了基本问题，但不考虑缩放。）。

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

我认为我可以更可靠地获得屏幕尺寸，也许可以使用它或screen.deviceXDPI来确定缩放系数，但我不确定如何使用它来纠正位置。

（有些人可能想知道我为什么要这样做。这是因为培训网站打开了用户屏幕右侧的浏览器窗口。浏览器使用脚本标签黑客与我的应用程序通信。应用程序想要调整自身大小，使其完全适合浏览器窗口的左侧。）

修改

我应该提到两件事：

我问的是浏览器缩放，您通常可以从“视图”菜单访问或按住Ctrl并转动鼠标滚轮。由于大多数网页无法很好地响应（例如）默认字体大小的变化而不会破坏其布局，因此浏览器通过缩放所有测量（包括像素）来实现缩放。为了保持一致，他们还会扩展报告的客户端和窗口大小，鼠标位置等。我遇到的麻烦是我想要真正的（未缩放的）度量。
我正在寻找JavaScript解决方案。

Answer 1

您见过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个像素对于图形应用程序来说真的很烦人，但确定缩放级别似乎很麻烦。

＆＃13;

<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>

＆＃13;

Answer 2

如果您希望制作全屏应用，请考虑以下事项： An expanding middle in CSS

查看 LiveDemo 以了解已接受的答案。此解决方案可以优雅地补偿因缩放而产生的任何影响。

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

2 个答案: