Defining CSS Media Queries

Question

Will the following media queries behave exactly same on mobile devices and computers or there's any difference?

@media only screen and (max-width: 480px), 
screen and (max-device-width: 480px){
...
}

and

@media (max-width: 480px) {
..
}

Answer 1

No, they will not. This is because device-width is not the same as width. If your media query has just width they'll behave the same, but when you introduce device-width you'll get different results. Refer to my response to this question for more info: CSS stylesheet that targets iPhone iPad not working