如何获得设备的真实尺寸？

Question

我有这个问题： 我想编写一个根据使用的设备显示不同的网站。 我想要的是这样的：

if (screen.width < 400) useLayout(1);
else if (screen.width >=400 and screen.width < 800) useLayout(2);
else useLayout(3);

现在的问题是，当我为移动设备编写代码时 javascript 报告的屏幕宽度是我使用元标记视口设置的。 所以如果我创建一个文件：

<meta id='viewport' name='viewport' content='width=410'>

那么当使用 javascript（window.screen.width 和 document.documentElement.clientWidth）时，返回的值正好是 410。这个值并不能反映真实的显示尺寸...

我真正需要的是了解该设备上的 100 像素有多少英寸（或厘米）...

有什么办法吗？ 谢谢

Answer 1

我知道这是标记为 JavaScript，但我认为这不是合适的解决方案。 CSS 内置了这一点。最好将您的设计层尽可能地保留在脚本之外。查看 CSS 响应式设计/Media Queries。

例子：

@media screen and (max-width:399px) { 
    body {
        background-color : 'red';
    }
}
@media screen and (min-width:400px) and (max-width:799px) { 
    body {
        background-color : 'blue';
    }
}
@media screen and (min-width:800px) { 
    body {
        background-color : 'green';
    }
}

您还可以将它们隔离到自己的 CSS 文件中，以最大程度地减少不适用用户的冗余 CSS 数据传输：

<link rel="stylesheet" media="screen and (max-width:399px)" href="layout1.css" />
<link rel="stylesheet" media="screen and (min-width:400px) and (max-width:799px)" href="layout2.css" />
<link rel="stylesheet" media="screen and (min-width:800px)" href="layout3.css" />

要回答你关于来自 JS 的屏幕不准确的问题，它是 not so cut and dry，需要一些空间给 interpretation variances。