CSS Media Query - Device width - portrait vs landscape

Question

I have following doubts:

1) Does the device-width that a media query matches, change depending on the mode (portrait vs landscape)?

2) Do usual laptops and desktops ever match portrait mode? Is the orientation random/undefined for devices that do not have screen rotation? Or does it always logically correspond to portrait (if height < width) and landscape (width < height).

regards

JP

Answer 1

1) Well, Yes it does in most cases, consider following example:

@media all and (max-device-width: 400px) {
    // styles here
}

Now your styles are applied only when the screen is 400px wide or less. Whether the device is in portrait or landscape mode does not matter.

But in iOS, there's a problem. There the device width is always 320px (iPhone) or, 768px for the iPad. So you need to use the orientation media query, otherwise or you won’t be able to tell that the user has changed orientation.

2) laptops and desktops match landscape mode as default (but you can change the orientation mode of browser manually). Since the use-case of orientation is on the iOS, you can be sure there's no random/undefined orientation.

Here is a nice tool for CSS3 media query: http://cssmediaqueries.com/

For more reading:

• http://blog.cloudfour.com/ipad-orientation-css/
• http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html
• http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

I recommend using min or max width. Using device layout can cause issues as there are hundreds of thousands of devices, each with a slightly different resolution.

As far as i know, computers do not render a layout mode.

@media screen and (max-width: 420px) {
//styles
}

@media screen and (min-width: 420px) {
//styles
}

It is best to use a mobile first method when using media queries (min-width) where each width element adds rules to a style. This will prevent duplicate rules and over writing. It also allows graceful browser fallback for older browsers.