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

Question

我有一个即将到来的项目，在不同高度，宽度，显示宽高比（4：3,16）的不同设备上显示物理相同尺寸（例如3厘米）的元素（例如按钮）至关重要：9），设备像素比率和dpi。如何使用HTML + CSS（+ JavaScript）执行此操作？

为了获得响应式设计，我为所有设备设置了视口：

<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

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

第一台设备：视频投影机=图像为250cm / 175cm，分辨率为1920 * 1080 第二个设备：ipad3 =视网膜屏幕图像为240mm / 180mm，分辨率为2048 * 1536

您是否尝试过英寸？

来定义尺寸

width: 1.25in;
height: .75in;