CSS媒体查询中宽度和设备宽度的区别答案

【问题标题】：Difference between width and device-width in CSS media queriesCSS媒体查询中宽度和设备宽度的区别
【发布时间】：2011-08-08 15:12:24
【问题描述】：

height 和 width 与 device-width 和 device-height 有什么区别（简单来说）？

【问题讨论】：

相关：stackoverflow.com/q/5725838/399317

标签： css media-queries

【解决方案1】：

device-width 是...

输出设备的宽度（指整个屏幕或页面，而不仅仅是呈现区域，如文档窗口）。

Source.

width...

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

Source.

【讨论】：

【解决方案2】：

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

而height CSS 属性指定元素内容区域的高度。内容区域位于元素的内边距、边框和边距内。

来源：https://developer.mozilla.org/en/CSS/

有关媒体查询的更多信息，请参阅：http://www.w3.org/TR/css3-mediaqueries/

【讨论】：

【解决方案3】：

如果您定义device-width 表示您在 iphone、ipad、ipod 和移动设备中打开页面时调用您的特定 css。例如：

@media only screen and (max-device-width:480px){
        body{
          color:red;
        }
    }

或者如果您定义宽度，这意味着您的特定 css 在您的窗口调整大小时被调用。例如：

@media only screen and (min-width: 481px) and (max-width: 1024px) {
        body{
         color:yellow;
        }
    }

【讨论】：

@CengizFrostclaw 宽度和设备宽度都适用于移动设备，但是当我们添加“设备宽度”时，css 仅适用于设备而不是桌面版本。

【解决方案4】：

不仅仅是一个迟到的答案希望它会帮助一些人

在 CSS 媒体中，宽度和设备宽度之间的差异可以是有点混乱，所以让我们解释一下。 设备宽度是指 设备本身的宽度，换句话说，设备的屏幕分辨率设备。假设您的屏幕分辨率为 1440 x 900。这表示屏幕的宽度为 1440 像素，因此它的设备宽度为 1440 像素。大多数手机的设备宽度为 480 像素或更低，包括流行的 iPhone 4（设备宽度：320px），尽管它技术上具有 640 x 960 分辨率。这是由于 iPhone 4 的视网膜显示，它将两个设备像素塞进每个 CSS 像素屏幕。 Ipad 3 也是如此。据报道 device-width 是 768px 就像它的前辈一样，即使它实际屏幕分辨率为 1536px x 2048px。一般宽度比较大不过，在创建响应式网页方面用途广泛当您希望专门针对移动设备时，设备宽度很有用设备（例如，不是带有小浏览器窗口的桌面）

来自developer.mozilla.org，

宽度：
价值：媒体：视觉、触觉
接受最小/最大前缀：是

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

注意：当用户调整窗口大小时，浏览器会根据使用宽度和高度媒体功能的媒体查询适当地切换样式表。！！！

我从 javascriptkit 中发现这篇文章非常有趣： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

【讨论】：

谢谢。这很好地解释了整个主题。
@Flek 很高兴这有帮助！
谢谢你这么详细的解释，真的很有帮助。

【解决方案5】：

如果您正在制作跨平台应用程序（例如，使用 phonegap/cordova），那么，

不要使用设备宽度或设备高度。而是在 CSS 媒体查询中使用宽度或高度，因为 Android 设备会在设备宽度或设备高度方面出现问题。对于 iOS，它工作正常。只有 android 设备不支持 device-width/device-height。

【讨论】：