Question

这是CSS相关问题。我只想在必要的时候使用Javascript。

如何绘制div，无论您在哪个设备上查看它都有1像素的边框？

如果您的操作系统已启用缩放（大多数用户拥有，如果他们有高分辨率显示器），您会注意到 1个像素不再是1个像素。如果您启用了200％缩放，border: 1px solid black;将绘制2像素宽的边框。你怎么能证实这一点？在CSS中添加此属性和值：transform: scale(0.5);。那是做什么的？它基本上可以将所有东西缩小到原始尺寸的50％。

现在，我如何确保当我的CSS值显示1px时，它实际上是1像素？

这是我的例子： http://jsfiddle.net/o6x9pg6e/1/

#container {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /*transform: scale(0.5);*/
}

谢谢

Answer 1

我使用它是完全无关紧要的。为什么你们非常关心我的用例是什么？这是我的问题，你们不应该关心我将把它用于什么

我的问题出现了：在我的示例中，无论用户运行哪种配置，如何使1px边框实际为1px？

以下是您直接问题的直接答案：您不能（根本）。

Answer 2

我会从这开始：

meta name="viewport" width="device-width"

，也许可以使用参数：user-scalable=no

Answer 3

使用CSS是不可能的。在移动设备上，您可以通过不允许用户缩放它来实现。

执行此操作的唯一方法是使用Javascript，但这需要可以找到here的浏览器解决方案。

应用缩放时，1个像素不是1个像素

3 个答案: