What is the difference between max-width and max-device-width media queries?

Question

Possible duplicate:
What is the difference between max-device-width and max-width for a mobile network?

For example, this website:

http://8faces.com/ uses max-width .

This tutorial uses max-device-width :

Example:

@media screen and (max-device-width: 480px) { .column { float: none; } } 

What is the difference between the two? They work on Android, iOS, iPad, etc.

Answer 1

check out this post. http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Answer 2

max-device-width will target devices (iphone / ipad) since max-width will target screens (browsers).

Hope this helps