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

Question

我有一个与使用CSS媒体查询相关的特定问题。 就像当我们说iPad的设备宽度时，我认为它总是返回768px（两个方向） 但在桌面浏览器上，设备宽度返回的值究竟是什么？ 是否与“宽度”在桌面媒体查询中返回的内容不同？

Answer 1

规范允许您访问：

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

  

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

     

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

因此，设备宽度是显示硬件的宽度，无论是手机本身还是桌面显示器。显然，在桌面情况下这不是很有用，因为屏幕尺寸与浏览器视口大小有很小关系。