移动web的max-device-width和max-width有什么区别?

I need to develop some html pages for iphone/android phones, but what is the difference between max-device-width and max-width ? I need to use different css for different screen size.

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

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

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

What's the difference?

有什么区别呢?

8 个解决方案

#1

236

max-width is the width of the target display area, e.g. the browser

最大宽度是目标显示区域的宽度，例如浏览器

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

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

Same goes for max-height and max-device-height naturally.

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

#2

max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height. Using multiple max-width (or min-width) conditions you could change the page styling as the browser is resized or the orientation changes on a device like an iPhone.

最大宽度指的是视口的宽度，可以结合最大高度来确定特定的尺寸或方向。使用多个max-width(或min-width)条件，您可以更改页面样式，因为浏览器被调整大小，或者像iPhone这样的设备上的方向变化。

max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing. This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.

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

#3

What do you think about using this style?

你觉得这个款式怎么样?

For all breakpoints which are mostly for "mobile device" I use min(max)-device-width and for breakpoints which are mostly for "desktop" use min(max)-width.

对于大多数用于“移动设备”的断点，我使用min(max)-设备宽度;对于大多数用于“桌面”的断点，我使用min(max)-宽度。

There are a lot of "mobile devices" that badly calculate width.

有很多“移动设备”计算不准确。

Look at http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml:

看看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 */
}

#4

max-device-width will have constant values (probably two)

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 */
}

The max-width is the width of the target display area means the current size of browser.

最大宽度是目标显示区域的宽度，表示当前浏览器的大小。

#5

the difference is that max-device-width is all screen's width and max-width means the space used by the browser to show the pages. But another important difference is the support of android browsers, in fact if u're going to use max-device-width this will work only in Opera, instead I'm sure that max-width will work for every kind of mobile browser (I had test it in Chrome, firefox and opera for ANDROID).

最大设备宽度是所有屏幕的宽度，最大宽度是指浏览器用来显示页面的空间。但另一个重要的区别是对android浏览器的支持，事实上，如果你要使用max-device-width的话，它只能在Opera中使用，而我确信max-width将适用于所有类型的移动浏览器(我在Chrome、firefox和Opera中对android进行了测试)。

#6

If you are making a cross-platform app (eg. using phonegap/cordova) then,

如果你正在开发一个跨平台的应用程序(例如。使用phonegap /科尔多瓦),那么,

Don't use device-width or device-height. Rather use width or height in CSS media queries because Android device will give problems in device-width or device-height. For iOS it works fine. Only android devices doesn't support device-width/device-height.

不要使用设备宽度或设备高度。在CSS媒体查询中使用宽度或高度，因为Android设备将在设备宽度或设备高度上造成问题。对于iOS，它运行良好。只有android设备不支持设备宽度/设备高度。

#7

max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.

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

• If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;

•如果你使用max-device-width，当你改变桌面浏览器窗口的大小时，CSS样式不会改变到不同的媒体查询设置;

• If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.

•如果你使用的是max-width，当你改变桌面浏览器的大小时，CSS会改变到不同的媒体查询设置，你可能会被显示为手机的样式，比如触摸友好的菜单。

#8

Don't use device-width/height anymore.

不使用设备宽度/高度了。

device-width, device-height and device-aspect-ratio are deprecated in Media Queries Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

在媒体查询级别4:https://developer.mozilla.org/en- us/docs/web/css/@media_features中，设备的宽度、设备的高度和设备的方面比率都被弃用了

Just use width/height (without min/max) in combination with orientation & (min/max-)resolution to target specific devices. On mobile width/height should be the same as device-width/height.

只需将宽度/高度(没有最小/最大值)与方向和(最小/最大值-)分辨率结合使用，就可以针对特定的设备。移动宽度/高度应与设备宽度/高度相同。

#1

236