248

max-device-width我需要为 iphone/android 手机开发一些 html 页面，但是和有什么区别max-width？我需要为不同的屏幕尺寸使用不同的 css。

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

有什么不同？

4

8 回答 8

264

max-width是目标显示区域的宽度，例如浏览器

max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕

自然max-height也是如此。max-device-height

于 2011-07-19T12:54:14.860 回答
87

max-width是指视口的宽度，可用于与max-height. 使用多个max-width（或min-width）条件，您可以在调整浏览器大小或在 iPhone 等设备上更改方向时更改页面样式。

max-device-width指的是设备的视口大小，与方向、当前比例或调整大小无关。这不会在设备上更改，因此不能用于在屏幕旋转或调整大小时切换样式表或 CSS 指令。

于 2011-08-09T13:00:07.037 回答
17

你觉得使用这种风格怎么样？

对于我使用的主要用于“移动设备”的所有断点以及min(max)-device-width主要用于“桌面”使用的断点min(max)-width。

有很多“移动设备”计算不好宽度。

看看http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml：

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}
于 2013-12-20T09:18:25.120 回答
11

max-device-width 是设备渲染宽度

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

max-width 是目标显示区域的宽度，意思是浏览器的当前大小。

于 2011-07-19T12:49:18.477 回答
6

不同之处在于 max-device-width 是所有屏幕的宽度，而 max-width 表示浏览器用于显示页面的空间。但另一个重要的区别是对安卓浏览器的支持，事实上如果你要使用 max-device-width 这将只在 Opera 中有效，相反我确信 max-width 将适用于每一种移动浏览器（我已经在 Chrome、firefox 和 Opera for ANDROID 中对其进行了测试）。

于 2012-10-10T10:27:29.497 回答
5

max-width是目标显示区域的宽度，例如浏览器；max-device-width是设备整个渲染区域的宽度，即实际设备屏幕的宽度。

• 如果您使用的是max-device-width，当您在桌面上更改浏览器窗口的大小时，CSS 样式不会更改为不同的媒体查询设置；

• 如果您使用max-width，当您在桌面上更改浏览器的大小时，CSS 将更改为不同的媒体查询设置，并且您可能会看到移动设备的样式，例如触摸友好的菜单。

于 2016-07-01T05:12:06.640 回答
4

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

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

于 2014-12-26T08:26:38.680 回答
2

不要再使用设备宽度/高度。

device-width、device-height 和 device-aspect-ratio 在媒体查询级别 4 中已弃用： https ://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

只需结合使用宽度/高度（没有最小/最大）和方向和（最小/最大）分辨率来定位特定设备。在移动设备上的宽度/高度应与设备宽度/高度相同。

于 2016-05-09T04:32:42.353 回答