html - 如何在桌面和移动设备上制作相同物理尺寸的按钮？

Question

我有一个即将进行的元素，在具有不同高度、宽度、显示纵横比(4:3、16)的不同设备上，元素(例如按钮)以物理相同尺寸(例如 3 厘米)显示是至关重要的:9)、设备像素比和 dpi。我如何使用 HTML + CSS(+ JavaScript)做到这一点？

为了实现响应式设计，我为所有设备设置了视口(viewport):

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

现在可以使用媒体查询在不同设备上布局我的网站。但是，当我定义一个具有固定高度/宽度的按钮类时，它会以不同的物理尺寸显示(例如在我的 MacOS Chrome 和 iOS Safari 上)。

.button {
  padding: 10px;
  border: none;
  background: none;
  border: 1px solid #000;

  width: 150px;
  height: 50px;
}

我了解 CSS 像素与物理像素。不过，该按钮在我的设备上显示的尺寸不同。有什么方法可以在不同设备上显示物理尺寸完全相同的按钮，而无需为每个设备编写媒体查询(因为这是一种不好的做法)？

Answer 1

这是不可能的，原因很简单:

第一台设备:video-projector = image is 250cm/175cm, resolution is 1920*1080 第二台设备:ipad3 = 视网膜屏幕图像为240mm/180mm，分辨率为2048*1536

您是否尝试过以英寸定义尺寸？

width: 1.25in;
height: .75in;