有一些像crazyegg.com这样的服务可以向您显示访问者将鼠标光标放在网页上的位置。我的问题是，考虑到人们有不同的屏幕宽度，他们如何确保我的x坐标与另一个人的x坐标在页面上的位置相同？这意味着，两个人可能有相同的鼠标x坐标，但由于屏幕宽度不同，他们的鼠标将位于网页的不同部分。
您如何创建一个考虑到这一点的网页热图服务，并可以在具有不同内容大小的多个不同网站上进行缩放和使用？
您可以收集x&y数据按元素（如主内容div）而不是整个视口。通过这种方式，您可以丢弃受用户分辨率约束的死区。
您可以在正文或包装器div中添加一个clickhandler（当您的内容使用margin: auto位于屏幕中央时效果更好），以保存页面的所有内容。传入的MouseEvent保存screenX/Y和clientX/Y坐标，前者是从屏幕左上角开始的坐标，另一个是基于主体或包装器div的左上角的坐标。使用clientX/Y的坐标可以很容易地创建热图，因为在不同的屏幕大小上，内容的起点相同。
您可以跟踪相对于单击元素的单击协调，而不是跟踪网页的绝对x和y坐标。因此，随着元素位置的变化，它将适应不同的屏幕大小和分辨率。
还有一个方面你需要注意，那就是用户的视口宽度和整个页面的长度（整个可滚动高度），你可以根据相对位置进行调整。
在Howuku，我们对鼠标点击和移动进行了大量优化，以确保为我们的网站热图工具动态生成精确的数据点。
我希望这能有所帮助！