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

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

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

if（屏幕宽度<400）使用布局（1）；
如果（screen.width>=400和screen.width<800）使用布局（2）；
平面布置图（3）；

现在的问题是，当我为移动设备编码时 javascript报告的屏幕宽度是我使用metatag viewport设置的宽度。 因此，如果我使用以下内容创建文件：

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

然后，当使用javascript（包括

window.screen.width

和

document.documentElement.clientWidth

）时，返回的值正好是410。此值不反映实际显示大小

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

有办法吗？

---

谢谢

我知道这是带标签的JavaScript，但我相信这不是合适的解决方案。CSS内置了这个功能。最好尽可能地将您的设计层排除在脚本之外。研究CSS响应设计/

例如：

@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屏幕不准确的问题，它需要一些空间。

它仍然不起作用：如果我设置元标记，viewport=410，那么屏幕是蓝色的如果我设置元标记，viewport=800，那么屏幕是绿色的，所以结果同样取决于我如何设置视口，而不是取决于“真实”设备大小…只是为了澄清我的目的：让我们考虑一下旧的Galaxy mobile，它有320x240，新的是720x1280。假设我在320x240上写了一些字体大小为14px的东西，它是可读的，但在720x1280上不会。。。。因此，在这种情况下，我应该能够理解这一点并更改字体大小（在我的情况下，我还将更改所使用的html文件），那么，如果视口值导致了所有冲突，为什么还要设置视口值呢？只需将其保留为