Javascript 跨浏览器和屏幕大小映射单击位置

我有一个按event.pageX和event.pageY收集点击事件的页面，我想按比例将这些位置映射到另一个页面上的600px×750px框。这意味着，如果框中有另一页的屏幕截图，则单击位置的标记将在同一位置显示

我知道我有$'body'。width，$'body'。height，document.body.offSetWidth，document.body.offSetHeight和screen.width，screen.height可供使用，但我不太确定如何最好地组合这些参数以获得准确的比率

目前我只是在sudo代码中使用：

x_ratio = 600 / document.body.offSetWidth
y_ratio = 750 / document.body.offSetHeight

new_x_position = event.pageX * x_ratio
new_y_position = event.pageY * y_ratio

然后在框内标记单击事件

<div id='click_marker' 
    style="position: relative; top: new_y_position px; left: new_x_position px;">
</div>

但这似乎无法保持浏览器和屏幕大小的准确性。我想采取在一个浏览器和屏幕大小的点击位置，并能够准确地映射到任何浏览器和屏幕大小

---

如何始终如一且准确地进行此计算？

pageX和pageY，为您提供相对于网页的坐标，而不是屏幕使用screenX和screenY获取相对于屏幕的坐标，或使用clientX和clientY获取相对于浏览器客户端窗口的坐标。这些事件字段可能在所有浏览器中都不可用。

首先，您需要确定要从中转换坐标的区域。它是浏览器窗口还是文档正文？例如，如果您有滚动条，您是否希望有人向下滚动并单击页面底部，同时也会出现在600x750框的底部或外部？你的问题显然不清楚

event.pageX和event.pageY提供了文档左边缘和上边缘的位置，因此使用body.offsetWidth只能在body填充整个文档时保持一致。请检查以下小提琴以了解：-注意，越过右身体边界将使相对坐标超过1.0

最简单的方法是获得$window.width和$window.height——如果不需要考虑滚动位置的话。否则，您将需要计算滚动位置，算法将有点困难

---

一旦你确定了这一点，你需要得到正确的宽度和高度。相关问题：

所以屏幕分辨率不成问题？不，我不明白为什么。如果你有正确的坐标相对于关注区域的原点，一切都会解决。如果你的身体不可滚动，答案是$window.width/height。如果它是可滚动的，我需要了解您希望如何将其设置在650x750上，以便为您提供完整的解决方案。