为什么视口宽度与实际显示宽度不匹配？

Question

Chrome显示我的视口宽度为1280像素。但是，我的实际显示分辨率是2560x1600px。我使用的机器是一个13.3英寸的macbook pro。为什么视口不是2560px宽？使用<meta name="viewport" content="width=device-width, initial-scale=1">没有任何区别。

我的显示设置：

实际上，不仅Chrome，Safari也显示同样的东西。

Answer 1

浏览器的视口大小为＆＃34; CSS像素＆＃34;，它们不是＆＃34;屏幕像素＆＃34;。差异来自＆＃34;显示密度＆＃34;。在你的情况下，你有一个＆＃34; 2x＆＃34;显示密度，因此每个CSS像素是＆＃34; 2x2＆＃34;的平方。屏幕像素。

只需在页面中渲染10px大小的div，拍摄快照并在您喜欢的位图图像编辑软件中进行检查：您会发现它的20像素大...我的意思是20个SCREEN像素。

有关css像素和显示密度的更多信息：

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

尝试＆＃34; css像素显示密度＆＃34;在搜索引擎上享受它。

Answer 2

与macbook pro的显示设置有关。 13.3 英寸 mbp 的默认设置为 1440x900。所以 screen.width=1440 和 screen.height=900。如果调整默认设置，screen.width 和 screen.height 也会发生变化

显示设置

使用 chrome 控制台获取宽度和高度

注意：使用 EasyRes 获取当前显示设置