CSS 媒体查询：桌面上的设备宽度

Question

我有一个关于使用 CSS 媒体查询的具体问题。 就像我们说 iPad 的设备宽度一样，我认为它总是返回 768px（两个方向） 但是在桌面浏览器上， device-width 返回的值到底是什么？ 它与桌面媒体查询中返回的“宽度”不同吗？

Answer 1

规范允许您访问两者：

https://developer.mozilla.org/en/CSS/Media_queries

device-width：描述输出设备的宽度（指整个屏幕或页面，而不仅仅是渲染区域，比如文档窗口）。

宽度：宽度媒体特性描述了输出设备的渲染表面的宽度（例如文档窗口的宽度，或者打印机上的页面框的宽度）。

所以 device-width 是显示硬件的宽度，无论是手机本身还是桌面显示器。显然，鉴于屏幕大小与浏览器视口大小几乎没有关系，因此在桌面环境中没有多大用处。