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

我有這個問題：我想編碼一個網站，根據使用的設備顯示不同。我想是這樣的：如何獲得設備的實際大小？

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

現在的問題是，當我爲移動設備代碼由JavaScript報道屏幕寬度是我設置使用Meta標記視口中的一個。所以，如果我創建一個文件：使用JavaScript（包括window.screen.width和document.documentElement.clientWidth）返回的值正好是410這個數值並不能反映實際顯示大小時

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

然後...

什麼我真的需要的是瞭解在該設備上有多少英寸（或釐米）是100像素...

有什麼辦法嗎？謝謝

來源

2013-03-15 Alarik

我知道這是標記爲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。

來源

2013-03-15 19:13:48 AlienWebguy

它仍然不工作：如果我設置元標記，視口= 410然後屏幕是藍色如果我設置元標記，視口= 800然後屏幕是綠色所以結果取決於我如何設置這個視口並不取決於「真實」的設備尺寸...... – Alarik 2013-03-16 11:36:54

只是爲了闡明我的目的：讓我們考慮一箇舊的Galaxy 320x240和一個新的720x1280。假設我在320x240上寫了字體大小爲14px的somethinf，並且它可讀，它不會在720x1280上......所以在這種情況下，我可以理解這一點，並改變字體大小（在我的情況下，我也會改變使用的HTML文件） – Alarik 2013-03-16 11:44:10

那麼，爲什麼你設置視口的價值，如果它導致所有的衝突？只要將它保留爲'' – AlienWebguy 2013-03-16 15:25:15

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

回答

相關問題