css - 真实屏幕分辨率不是假的

Question

我一直致力于使用 twitter bootstrap 创建一个响应式网站。为了了解我的网站在不同分辨率下的工作情况，我使用了他的 google chrome 扩展程序。

我引用了这篇文章，它告诉我 Nexus 7 的分辨率是 1200 x 800。这告诉我我的 Nexus 4 的分辨率是 1280 x 768。

但是，当我在插件上设置这些分辨率时，网站在浏览器上的外观与在设备上的外观不同。我的 macbook pro 上的分辨率似乎比我的 Nexus 7 上的高，因为当使用 1200 x 800 的浏览器尺寸时，它更适合笔记本电脑。

他们报告的移动设备似乎有更小的显示器。看起来 Nexus 4 的显示屏有时只有（大约）480 像素宽。

这是为什么？

我有一种预感，它与ppi有关。但如果是这样的话，我如何在我的笔记本电脑上测试具有适当对应关系的响应式设计？有没有一个公式可以用来确定在什么浏览器窗口大小上进行测试？

Answer 1

确保使用视口标签，<meta name="viewport" content="width=device-width,initial-scale=1.0">. 关键是width=device-width零件。请参阅这篇 MDN 文章，了解其工作原理。

Answer 2

Nexus4 的分辨率为 768*1280 像素，像素比为 2。这意味着，您有 768*1280 实际像素（物理），只有 768/2、1280/2 => 384*640 像素软件分辨率，即 in-应用程序分辨率，即浏览器分辨率。为什么？因为“趋势” ppi 疯狂和一些神秘的 ppl 看到“像素”（即使在渴望勇敢时也从未见过这些像素）。人们生病了，所以制造商做了这个把戏。