好吧，这是个老问题，但很有趣。这是个老问题，但很有趣。
我知道我们有 1in 物理单元映射到 96px 屏幕上的dpi。这种映射来自于90年代，当时显示器屏幕的分辨率要低得多。那是一个不同的时代。当时的Web是 "桌面 "实用程序，正如人们所猜测的那样，今天的实现还没有跟上新的时代。网络版图.
大约在2020年。
我想声明一个css变量 --inch 在 :root 的网页，并使用媒体查询将其映射到不同设备的绝对英寸。我可以在我目前拥有的设备上做到这一点，比如这样。
/* css */
:root {
--inch: 130px; /* this value is from my Macbook Pro 2017 for example. */
}
.square {
width: var(--inch);
height: var(--inch);
background: red;
}
然后我用尺子测量了屏幕上正方形的尺寸。我甚至做了一个 密码笔 以此来测试和比较绝对英寸与。in 您的浏览器支持的单元机。
现在。我们应该如何去设置 --inch 在手机、watchos、iPad、台式机，以及如果可能的话在电视和投影仪上也是可变的？
更新1：钉住了一点范围。
以下是 media-queries 涵盖了市场上广泛的屏幕选择。此列表是2013年的(学分)，可能并不详尽，但可以改进。
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
更新2。
下面的子句处理了像素到 --inch 例如，2017年所有视网膜MBP的映射。
@media (resolution: 192dpi) and (-webkit-device-pixel-ratio: 2) {
:root {
--inch: 130px;
}
}
.square {
width: var(--inch);
height: var(--inch);
background: orangered;
}
其中的 --inch 变量意味着真正的物理英寸的测量。请注意，我们没有在media-queries上使用minmax来适应屏幕dpis的范围。这个映射完全是针对MBP'17的，只是返回的dpi为192，dpr为2。
显然，现在可以将css像素映射到真正的物理英寸。这是繁琐的，但也是可能的。要做到这一点，我们需要使用 CSS自定义属性 也就是所谓的CSS变量，就像这样。
/* 13.3-inch MBP (2012) (1280 x 800) */
@media (resolution: 96dpi) and (device-width: 1280px) {
:root {
--inch: 116px;
}
}
/* 17" Retina MBP/Chrome values */
@media (resolution: 192dpi) and (device-width: 1680px) {
:root {
--inch: 130px;
}
}
/* Windows 10 @100% (1366 x 768) landscape*/
@media (resolution: 96dpi) and (device-width: 1366px) {
:root {
--inch: 114px;
}
}
/* Windows 10 Pro @100% (1920 x 1080px) landscape. */
@media (resolution: 96dpi) and (device-width: 1920px) {
:root {
--inch: 144px;
}
}
/* Windows 10 Pro @125% (1920 x 1080px) landscape. */
@media (resolution: 120dpi) and (device-width: 1536px) {
:root {
--inch: 115px;
}
}
/* 27" EIZO monitor (2560 x 1440)*/
@media (resolution: 115dpi) and (device-width: 2560px) {
:root {
--inch: 92px;
}
}
/****************/
/* MOBILE ZONE */
/****************/
/* iPhone 11 Pro Max */
@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
:root {
--inch: 370px;
}
}
@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
:root {
--inch: 189px;
}
}
/****************/
/* MOBILE ZONE */
/****************/
/* iPhone 11 Pro Max */
@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
:root {
--inch: 370px;
}
}
@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
:root {
--inch: 189px;
}
}
/* …and so on. */
你需要为市场上大多数主要设备或你希望支持的设备提供特定的硬件映射。也可以使用min()max()范围的dpi+设备宽度组合来声明一个 --inch css变量在 :root 的文件，但这将引入一个稍高的误差范围。
一旦所有的映射都到位，您只需使用 var(--inch) 在你的样式表上进行布局，然后你就可以了。
我已经把这个解决方案变成了一个开源的 polyfill 此处 涵盖了当时的主要设备。欢迎使用它，并提交PR，以增加新的。--inch:pixels 映射，如果你的devicebrowser还没有涵盖在里面的话。