真實屏幕分辨率不是假的

Question

我一直在使用twitter bootstrap創建一個響應式網站。爲了看我的網站如何在不同的分辨率下工作，我使用了t his google chrome extension。

我採購的這篇文章它告訴我的Nexus 7的分辨率爲1200 X 800 This告訴我，我的Nexus 4的分辨率爲1280 * 768。

然而，當我設置的插件，這些決議，該網站在瀏覽器上看起來與在設備上看起來不同。在我的MacBook Pro上，然後在我的Nexus 7上，分辨率似乎更高，因爲使用1200 x 800的瀏覽器時，筆記本電腦上的內容更適合使用。

移動設備似乎顯示的顯示屏較小。看起來Nexus 4顯示器有時只有（約）480px寬。

這是爲什麼？

我有一個預感，它與PPI有關。但是，如果是這樣的話，我如何測試筆記本電腦上的響應式設計以及適當的對應關係？有沒有一個公式可以用來確定要測試它的瀏覽器窗口大小？

Answer 1

確保使用視口標籤<meta name="viewport" content="width=device-width,initial-scale=1.0">。關鍵是width=device-width部分。請參閱this MDN article on the how this works。

Answer 2

Nexus4具有768×1280像素的分辨率和2 像素，比這意味着，你有768個* 1280個像素實（物理），只有 2分之768，二分之一千二百八十=> 384 * 640 px軟件分辨率，即應用內分辨率，即瀏覽器分辨率。 爲什麼？ 「熱門」ppi的瘋狂和一些神祕的ppl看到「像素」（從未見過這些像素，即使在渴望的布拉沃）。 ppl病了，所以製造商製造了這個伎倆。