Question

是否可以在所有设备上保持相同的div大小？我的目标是在所有设备上使用相同的2inx3in矩形，但无法正常工作。

这是我的代码示例：

        <div id="area" style="border: 1px solid #ff0000; margin: 0 auto; width: 2in; height: 3in;"></div>

这是我的输出示例：

Kotlin support for SqlObject

希望有人可以提供帮助。谢谢！

Answer 1

我不推荐这种解决方案，在大多数情况下，具有可调整的大小是最佳解决方案。但是您是否尝试将宽度和高度设置为固定像素？

尝试这样的事情：

height:70px; width: 70px

Answer 2

问题是您使用的是英寸，所以英寸将取决于您要从中打开网页的设备。

所以我建议您使用px之类的其他测量方法，也许您应该使用：

cloud sql proxy

Answer 3

不幸的是不使用CSS，因为它取决于设备屏幕的像素密度。 css英寸（英寸）测量值与物理英寸数不同

Answer 4

单独使用像素，英寸或百分数都不可行。您需要设备信息（例如PPI，屏幕尺寸和分辨率），并计算div（如果希望每个设备上的英寸尺寸都相同）的像素数。

Answer 5

尝试使用m代表米，而ft代表英尺。这些是现实世界中的好东西，它们应该为您提供帮助

Answer 6

有一个媒体查询可以检测某些像素密度

@media (-webkit-device-pixel-ratio: 1) {
  .area {
    width: 300px;
  }
}

@media (-webkit-device-pixel-ratio: 1.1) {
  .area {
    width: 272px;
  }
}

@media (-webkit-device-pixel-ratio: 3) {
  p {
    width: 100px;
  }
}

当然，您应该添加尽可能多的媒体查询，只要您想支持的设备即可。

它仅适用于Chromium和Opera等Webkit引擎。

在设备之间保持相同的div大小？

6 个答案: