CSS 移动网络的 max-device-width 和 max-width 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6747242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between max-device-width and max-width for mobile web?
提问by virsir
I need to develop some html pages for iphone/android phones, but what is the difference between max-device-widthand 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?
有什么不同？
回答by Ian Devlin
max-widthis the width of the target display area, e.g. the browser
max-width是目标显示区域的宽度，例如浏览器
max-device-widthis the width of the device's entire rendering area, i.e. the actual device screen
max-device-width是设备整个渲染区域的宽度，即实际设备屏幕
Same goes for max-heightand max-device-heightnaturally.
这同样适用于max-height和max-device-height自然。
回答by voncox
max-widthrefers 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指的是视口的宽度，可与 结合使用以定位特定大小或方向max-height。使用多个max-width（或min-width）条件，您可以在调整浏览器大小或在 iPhone 等设备上更改方向时更改页面样式。
max-device-widthrefers 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 指令。
回答by 1ubos
What do you think about using this style?
你觉得使用这种风格怎么样？
For all breakpoints which are mostly for "mobile device" I use min(max)-device-widthand for breakpoints which are mostly for "desktop" use min(max)-width.
对于我使用的主要用于“移动设备”的所有断点min(max)-device-width和主要用于“桌面”使用的断点min(max)-width。
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 */
}
回答by Sarath
max-device-width is the device rendering width
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.
max-width 是目标显示区域的宽度，表示浏览器当前的大小。
回答by Danny
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).
不同之处在于 max-device-width 是所有屏幕的宽度，而 max-width 表示浏览器用于显示页面的空间。但另一个重要的区别是对 android 浏览器的支持，事实上，如果你打算使用 max-device-width 这将只适用于 Opera，相反我确信 max-width 将适用于所有类型的移动浏览器（我已经在 Chrome、firefox 和用于 ANDROID 的歌剧中对其进行了测试）。
回答by Lucky Chaturvedi
max-widthis the width of the target display area, e.g. the browser; max-device-widthis the width of the device's entire rendering area, i.e. the actual device screen.
max-width是目标显示区域的宽度，例如浏览器；max-device-width是设备整个渲染区域的宽度，即实际设备屏幕的宽度。
? 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 将更改为不同的媒体查询设置，并且您可能会看到移动设备的样式，例如触摸友好的菜单。
回答by Himanshu Garg
If you are making a cross-platform app (eg. using phonegap/cordova) then,
如果您正在制作跨平台应用程序（例如使用 phonegap/cordova），那么，
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，它工作正常。只有安卓设备不支持设备宽度/设备高度。
回答by SammieFox
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#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.
只需将宽度/高度（不包括最小/最大）与方向和（最小/最大-）分辨率结合使用即可针对特定设备。在移动设备上的宽度/高度应该与设备宽度/高度相同。
