修正了元素's translate x在移动设备上缩放时不同步

Fixed element's translate x is out of sync when zoomed on mobile device

本文关键字：移动 缩放 同步 元素 translate      更新时间：2023-09-26

我有一个固定的标题。我将其设置为固定位置，但它可以沿着x轴滚动。这是我使用的javascript的x-scroll: 

var thead = document.querySelector("#acctInqFormResults table tr:first-child");
window.onscroll = function() {
    thead.style["-webkit-transform"] = "translateX(" + -window.scrollX + "px)";
    thead.style.transform = "translateX(" + -window.scrollX + "px)";
};

直到我在移动设备上测试它之前，它一直运行得很好。当我缩放表格时，固定标题似乎以与文档以全尺寸加载时相同的速度滚动，从而使标题和表格内容不同步。是否有一种方法可以补偿移动缩放?

我相信添加这个视口元标签应该有助于移动浏览器正确计算位置。毕竟，如果你正在制作移动专用的网站版本，缩放是无用的，甚至可以完全避免，以获得最佳的用户体验。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
相关文章：