如何獲得設備的真實大小？

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。此值不反映REAL的顯示大小...

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

有什么辦法嗎？ 謝謝

Answer 1

我知道這是標記為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來回答關於屏幕不准確的問題，它不是那么干燥 ，需要一些解釋差異的空間 。