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

Question

我一直致力于使用 Twitter bootstrap 创建响应式网站。为了查看我的网站在不同分辨率下的工作情况，我使用了 t his google chrome extension .

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

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

据报告，移动设备的显示屏似乎较小。看起来 Nexus 4 显示器有时只有(大约)480 像素宽。

这是为什么？

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

Answer 1

确保使用视口(viewport)标签，<meta name="viewport" content="width=device-width,initial-scale=1.0"> .关键是 width=device-width部分。参见 this MDN article on the how this works .