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

Posted 2023-03-06

【中文标题】CSS 媒体查询：桌面上的设备宽度

【英文标题】：CSS Media Queries : device-width on desktop

【发布时间】：2011-12-17 01:45:19

【问题描述】：

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

【参考方案1】：

规范允许您访问两者：

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

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

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

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

【讨论】：

非常感谢...所以如果我使用媒体查询来区分使用设备宽度的桌面/iPhone/iPad，我如何为桌面指定它....我知道 iPhone 可以通过最大 480px...ipad 可以通过等于 768px...但是我如何指定桌面的设备宽度...我的意思是我想要 3 个单独的 CSS 链接语句..

还要确认一下，宽度和设备宽度在 iPhone/iPad 上是否间接相同？