---

max-device-width CSS3 Media Query
2011-02-05

CSS3 introduces Media Queries which are an extremely powerful way to customize your site depending on the media that is displaying it.

Some people have trouble wrapping their head around the max-device-width query which is commonly used to differentiate between a desktop and mobile browser. To target CSS for the iPhone you would use (max-device-width:480px) since the iPhone’s screen size is 320px by 480px. Then comes the question “But if the phone is in the portrait orientation wouldn’t the maximum width be 320px?”

Yes and no. In portrait orientation the maximum width is 320px BUT that is different from the maximum device width which is unchanging. I think the bit where people get confused is the word “width” which generally translates to left and right.

In the case of max-device-width it would be more appropriate to think of it as max-device-dimension. Even if you are able to change the width of the browser on your phone, your phone will always have fixed dimensions and therefore a maximum width.

Is that more clear?

More on the device-width media query at w3.org

Share

trackback URL for this post: http://lab.joelgillman.com/archives/174_max-device-width-css3-media-query/trackback