CODEWITHSUNDEEP
cssmedia-queries
user1355300
user1355300

Reputation: 4987

Defining CSS Media Queries

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

Upvotes: 1

Views: 911

Answers (2)

Chuck Kollars
Chuck Kollars

Reputation: 2175

Media Queries themselves will behave the same. But when they query different things, they're likely to get different answers.

"only screen" usually works, but a small number of mobile devices classify themselves as 'handheld' rather than 'screen'. (My personal inclination is "only all" is better, partly because it includes handheld and partly because it provides the same CSS to print and presentation [i.e. projectors] too.)

For a first approximation, min/max-width is the logical current window (which may have been set by the user), while min/max-device-width is the physical screen. But many mobile devices will not return what you read in their sales specs for screen size. Many of them include a concept of a "viewport" ...something you can modify (with <meta name="viewport" content="...), but which usually defaults to something much larger than the actual screen dimensions. Thoroughly understanding the "viewport" will clarify (and possibly answer too) your query.

Also since mobile devices are often viewed at a much closer distance, they need much denser pixels in order to provide an equivalent user experience. (The iPad's "retina" display exemplifies the trend.) As a result of the very high pixel density, small physical dimensions can have notably large pixel dimensions anyway. (My own inclination is to think you'll ultimately have to take density into account in your Media Queries in order to produce really sensible results.)


In any case, for an alternative to Media Queries that keeps the concept but implements it rather differently, you might want to look at http://www.ckollars.org/alternative-to-media-queries.html

Upvotes: 1

Suvi Vignarajah
Suvi Vignarajah

Reputation: 5788

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

Upvotes: 4

Related Questions