设备像素比率和DOMElement.scrollLeft

Question

在此感谢您的指导和帮助。这是我想要做的：

• 我正在用嵌入式浏览器编写一个Android应用程序。浏览器加载网页

• 网页如下（重要部分）：

               （网页的主要内容）     

• 在加载页面之前，我运行以下JQuery代码来确定窗口的尺寸：

  var windowWidth = $（window）.width（）; var windowHeight = $（window）.height（）;

• 接下来，我加载上面的页面（它是div中的内容），使其看起来像这样：

  

其中div的宽度为$（window）.width（）-（2 *主体边距）。 div的CSS如下所示：

container {
    height: (windowHeight - 2 * bodyMargin);
    width: (windowWidth - 2 * bodyMargin);
    column-width: (windowWidth - 2 * bodyMargin);
    -webkit-column-width: (windowWidth - 2 * bodyMargin);
    overflow: scroll;
}

• 如您所见，div的内容分为CSS列，每列的宽度等于容器div的宽度。我有原生的android按钮，一次（向左或向右）滚动div的一个CSS列的内容。这是我用来向左或向右滚动div内容的Javascript：

  document.getElementById（“ container”）。scrollLeft =（columnWidth * columnNumber）;

最后，这是我遇到的问题：上面的方法在window.devicePixelRatio是整数（例如1、2、3）的所有Android设备上都可以正常工作，但是在window.devicePixelRatio是a的设备上都能正常工作十进制数（例如2.625），我的滚动逻辑迅速关闭，并且列开始被裁剪到div的右边缘（因为scrollLeft计算已关闭）。例如，我发现在devicePixelRatio为2.625的设备上，经过12列的scrollLeft可以关闭多达3个像素（这将在div的右侧创建大量的文本/图像剪切）。 / p>

最后，我们提出了一个问题：如何纠正滚动逻辑和/或CSS以正确处理具有十进制值devicePixelRatio的设备？再次感谢您，如果我可以提供更多信息，请告诉我！