不同分辨率下热力图坐标缩放偏移问题求助

我正在为自研仪表盘开发跨页面热力图功能，目前遇到不同屏幕分辨率下坐标缩放偏移的问题：同分辨率下热力图坐标匹配正常，但切换分辨率后坐标就会出现偏移，参考过屏幕坐标重计算的方案后仍未解决。

坐标记录的前端代码 #

前端通过以下代码记录用户点击的坐标：

function clickHandler(e) {
    let target = e.target || e.srcElement;
    const
        rect = target.getBoundingClientRect(),
        elementX = e.clientX - rect.left,
        elementY = e.clientY - rect.top,
        elementWidth = rect.width,
        elementHeight = rect.height;
    //
    const
        fullPageX = e.pageX,
        fullPageY = e.pageY,
        body = document.body,
        html = document.documentElement,
        width = window.innerWidth,
        height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
    //
    rrweb.record.addCustomEvent("click", {
        element: {
            x: elementX,
            y: elementY,
            elementWidth,
            elementHeight,
        },
        fullpage: {
            x: fullPageX,
            y: fullPageY,
            innerWidth: width,
            innerHeight: height,
        },
    });
    console.log(elementX, elementY, width, height, fullPageX, fullPageY, elementWidth, elementHeight);
}

数据库返回的示例数据 #

坐标数据存入数据库后，按GROUP BY x_coord, y_coord, width, height, element_width, element_height,x_element, y_element,page_height分组，示例返回数据如下：

{
    "x_coord": 629,
    "y_coord": 1201,
    "height": 959,
    "width": 1920,
    "element_width": 498,
    "element_height": 508,
    "x_element": 466.0279541015625,
    "y_element": 85.62030029296875,
    "page_height": 5781,
    "click_count": "1"
}

{
    "x_coord": -500,
    "y_coord": 1227,
    "height": 959,
    "width": 1920,
    "element_width": 115,
    "element_height": 83,
    "x_element": 63.191253662109375,
    "y_element": 40.5150146484375,
    "page_height": 5781,
    "click_count": "1"
}

当前坐标缩放逻辑 #

前端基于Angular 8，使用heatmap.js构建热力图，热力图容器非全屏（宽度约800px），需要将宽约1520px、高约8000px的背景图缩放至容器内，并匹配对应点击坐标。当前的缩放逻辑如下：

let width = coordinates[i].width;
let height = coordinates[i].page_height;
let x = width / 2 + coordinates[i].x_coord;
let y = coordinates[i].y_coord;

let widthRatio = nativeElement.clientWidth / width;
let heightRatio = nativeElement.clientHeight / height;

userData.push({
  x: Math.round(x * widthRatio),
  y: Math.round(y * heightRatio),
  value: parseInt(coordinates[i].click_count),
});

请问我在坐标缩放逻辑中遗漏了什么？

内容的提问来源于stack exchange，提问作者Dren