如何才能获得浏览器窗口的左边缘(包括菜单、边框、标题等),而不考虑缩放级别?(This question解决了基本问题,但没有考虑缩放。)
window.screenLeft或window.screenX在Chrome和Safari上运行良好,但它们使用IE6、IE8和火狐报告“固定”的值。
我认为我可以更可靠地获取屏幕的大小,也许可以使用它或screen.deviceXDPI来确定缩放因子,但我不确定如何使用它来校正位置。
(你们中的一些人可能想知道我为什么要这样做。这是因为培训网站在用户屏幕的右侧打开一个浏览器窗口。浏览器使用脚本标签hack与我的应用程序通信。应用程序希望调整自身的大小,使其恰好适合浏览器窗口的左侧。)
编辑
我应该提到两件事:
发布于 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>
发布于 2011-03-07 07:54:37
如果你想做一个全屏应用程序,你有没有考虑过这个:An expanding middle in CSS
请查看LiveDemo以获得公认的答案。这个解决方案优雅地补偿了由于缩放而产生的任何效果。
https://stackoverflow.com/questions/3929295
复制相似问题