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

css mobile-website media-queries
virsir picture virsir · Jul 19, 2011 · Viewed 125.8k times · Source

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?

Answer

Ian Devlin picture Ian Devlin · Jul 19, 2011

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.

Related questions

Why are my CSS3 media queries not working?

In the styles.css, I am using media queries, both of which use a variation of: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } The sites resize to the layout I …

Read More
Responsive design with media query : screen size?

I'm working on responsive designed web site using media queries. But i do not know how to take a good width set. As you can see on this table, there is a lot of different resolution even for a single …

Read More
Media query not working in IE9

I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below: @media only screen and (…

Read More