What is the difference between max-device-width and max-width for mobile web?

Question

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?

Atwood

Related: Should I use max-device-width or max-width? – Pericarditis

I have found that max-device-width works even if <meta name="viewport" ...> tag is not included for small screen devices and max-width doesn't work without a meta tag – Starrstarred

Answer 1

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.

Enchain

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. – Primipara

@JohnMagnolia What makes you think that max-device-width is better for production? Wouldn't max-width guarantee better responsiveness, regardless of device? – Notional

@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. – Merchandising

@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. – Maressa

@Ian Devlin Should I use max-device-width for mobile and ipad,and max-width for laptop and destop? – Merilynmeringue

@Merilynmeringue See Should I use max-device-width or max-width? – Pericarditis

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? – Merilynmeringue

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. – Balladist

@Balladist 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. – Silkaline

What happens when the user is working in split-screen on an iPad, say? Will max-device-width return the width of the underlying view, rather than the horizontal width of the device in its current orientation? – Inevitable

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

Nailbiting

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. – Kristoferkristoffer

@JackieChiles makes a good point in another SO thread that one should consider (regarding mobile styles appearing on larger devices): #8565252 – Kristoferkristoffer

This good answer is not complete: orientation swaps device-width and device-height on Android but not iOS: see quirksmode.org/blog/archives/2010/04/the_orientation.html . – Yesteryear

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

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

Trickle

Doesn't answer the question and is actually a bad way to work on your breakpoints - Be careful. – Cards

Answer 4

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.

Ultun

@media all and (max-width: 400px) { } What's the difference – Atwood

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

Hurlburt

Answer 6

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.

Concomitant

Answer 7

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.

Vanhomrigh

Answer 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

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.

Vey

The plain "device-xxx" items are deprecated, the "max-device-xxx" items are NOT deprecated. – Mezereum

@RogerKrueger Are you certain about that? I see nothing to indicate that max-device-xxx media queries aren't deprecated. – Squamous