246

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.

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

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

What's the difference?

Shashank Agrawal
  • 21,660
  • 9
  • 71
  • 105
virsir
  • 14,359
  • 23
  • 71
  • 108
  • 4
    Related: [**Should I use max-device-width or max-width?**](http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width) – Josh Crozier Mar 25 '15 at 04:57
  • 1
    I have found that `max-device-width` works even if `` tag is not included for small screen devices and `max-width` doesn't work without a `meta` tag – Faizan Akram Dar Jul 12 '16 at 07:27

8 Answers8

260

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

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

Ian Devlin
  • 17,608
  • 4
  • 53
  • 69
  • 15
    If you want to see the change when resizing your browser, use max-width for development, although max-device-width is more accurate for production. – John Magnolia Mar 24 '13 at 20:15
  • 32
    @JohnMagnolia What makes you think that max-device-width is better for production? Wouldn't max-width guarantee better responsiveness, regardless of device? – e_known Jul 02 '13 at 16:19
  • 8
    @eknown I agree. Users from the whole spectrum of skill/knowledge don't always have their desktop browser window maximized (but I have not yet seen a tablet or phone which has a browser NOT opened maximized - I suppose it is possible in a hybrid app, but that is a different case). Max-width would certainly be more universal. – Jason Jan 15 '14 at 20:34
  • 2
    @eknown I disagree. Depending on your styles, you might have a very different look after hitting that media breakpoint and if you are loading stylesheets based on media breakpoints it can be very jarring for the site to take on a whole different look when resizing the browser window. – TwinPrimesAreEz Apr 03 '14 at 22:17
  • @Ian Devlin Should I use `max-device-width` for mobile and ipad,and `max-width` for laptop and destop? – Coder Mar 13 '15 at 15:45
  • @Coder See [**Should I use max-device-width or max-width?**](http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width) – Josh Crozier Mar 25 '15 at 22:04
  • Hi Josh,I'm using both `width` and `device-width`,so that I can get expected view on phone and also responsive design on laptop for browsers different size.Thanks for your post.I'll read it for sure.Anyway,am I doing it right? – Coder Mar 25 '15 at 22:11
  • 2
    If you've got a radically different layout for mobile devices, likely the fundamental reason is because there's no mouse cursor (they need bigger buttons and a single column to scroll through). A great media query to use in that case is `@media screen and (pointer: coarse) and (hover: none)` which will switch to the mobile version irregardless of how many pixels mobile devices pack into their screens in future. – EoghanM Jan 11 '19 at 18:19
  • @EoghanM thank you so much for this comment. I was struggling so much to get a perfect mobile detection and this is the only thing that works reliably. – LPChip Jun 09 '20 at 20:23
84

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.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
voncox
  • 1,111
  • 7
  • 13
  • 11
    This answer made it "click" for me better than the accepted answer. It sounds like for most applications, `max-width` and `max-height` will be the ones to use. – hotshot309 Jun 13 '12 at 16:42
  • 2
    @JackieChiles makes a good point in another SO thread that one should consider (regarding mobile styles appearing on larger devices): http://stackoverflow.com/questions/8564752/good-widths-for-media-queries-on-responsive-site – hotshot309 Jun 13 '12 at 18:18
  • 5
    This good answer is not complete: orientation swaps device-width and device-height on Android but not iOS: see http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html . –  Dec 07 '12 at 00:34
17

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 */
}
Herr_Schwabullek
  • 730
  • 10
  • 20
1ubos
  • 1,116
  • 9
  • 11
  • Doesn't answer the question and is actually a bad way to work on your breakpoints - Be careful. – Forty Dec 29 '17 at 11:12
9

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.

Sarath
  • 8,472
  • 11
  • 44
  • 75
6

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).

Danny
  • 59
  • 1
  • 1
5

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.

Lucky Chaturvedi
  • 91
  • 1
  • 1
4

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.

Himanshu Garg
  • 539
  • 9
  • 21
2

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.

SammieFox
  • 438
  • 1
  • 6
  • 4