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-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.
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.
There are a lot of "mobile devices" that badly calculate width.
Look at 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 */
}
max-device-width is the device rendering 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.
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-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.
• 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;
• 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.
If you are making a cross-platform app (eg. using phonegap/cordova) then,
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.
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
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.
max-device-widthworks even if<meta name="viewport" ...>tag is not included for small screen devices andmax-widthdoesn't work without ametatag - Faizan Akram Dar