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

Question

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

我的显示设置： 实际上，不仅Chrome，Safari也是一样的。

- Peter

---

你的浏览器窗口是否覆盖整个屏幕宽度？ - Asons

是的，它处于全屏模式。 - Peter

我猜测最可能的原因是操作系统在Chrome中欺骗了实际的像素大小？这可能与显示设置有关；对于小屏幕上非常高分辨率的显示器，这样的技巧很常见。 - Katana314

Meta viewport只适用于移动设备和平板电脑，对桌面浏览器无效。你是否更改了缩放因子（CTRL+/-）？缩放会影响视口宽度。另外，你使用哪些属性来获取视口的实际宽度？ - Blago Eres

@BlagoEres：缩放设置为100%。我将浏览器切换到全屏模式，选择检查器中的html，并根据盒模型检查尺寸。内容区域宽度为1280像素，没有填充、边框或外边距。 - Peter

Answer 1

浏览器的视口大小以“CSS像素”为单位，而不是“屏幕像素”。这种差异来自于“显示密度”。在您的情况下，您拥有“2x”的显示密度，因此每个CSS像素是“2x2”屏幕像素的正方形。

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

关于CSS像素和显示密度的更多信息：

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

在搜索引擎上尝试搜索“CSS像素显示密度”，并享受它。

- miguel-svq

Answer 2

这与MacBook Pro的显示设置有关。13.3英寸MBP的默认设置是1440x900。所以，屏幕宽度为1440，屏幕高度为900。如果您调整了默认设置，屏幕宽度和屏幕高度也会改变。

显示设置

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

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

- Wythe