获取浏览器窗口位置，而不考虑缩放
如何才能获得浏览器窗口的左边缘(包括菜单、边框、标题等)，而不考虑缩放级别？(This question解决了基本问题，但没有考虑缩放。)
window.screenLeft或window.screenX在Chrome和Safari上运行良好，但它们使用IE6、IE8和火狐报告“固定”的值。
我认为我可以更可靠地获取屏幕的大小，也许可以使用它或screen.deviceXDPI来确定缩放因子，但我不确定如何使用它来校正位置。
(你们中的一些人可能想知道我为什么要这样做。这是因为培训网站在用户屏幕的右侧打开一个浏览器窗口。浏览器使用脚本标签hack与我的应用程序通信。应用程序希望调整自身的大小，使其恰好适合浏览器窗口的左侧。)
编辑
我应该提到两件事：
- 我问的是浏览器的缩放，通常可以从视图菜单访问，或者按住Ctrl键并旋转鼠标滚轮来访问。因为大多数网页不能很好地响应(例如)默认字体大小的变化而不弄乱它们的布局，所以浏览器通过缩放所有测量来实现缩放，包括像素。为了保持一致，它们还缩放报告的客户端和窗口大小、鼠标位置等。对我来说，麻烦是我想要实际的(未缩放的)度量。
- 我正在寻找JavaScript解决方案。
回答 2
Stack Overflow用户
发布于 2016-08-09 07:20:51
你看到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个像素。使用window.devicePixelRatio或二进制搜索基本上得到了相同的结果。我猜对于图形应用程序来说，两个像素的偏差可能真的很烦人，但确定缩放级别似乎很麻烦。
<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>
Stack Overflow用户
发布于 2011-03-07 07:54:37
如果你想做一个全屏应用程序，你有没有考虑过这个：An expanding middle in CSS
请查看LiveDemo以获得公认的答案。这个解决方案优雅地补偿了由于缩放而产生的任何效果。
https://stackoverflow.com/questions/3929295
复制相似问题