CSS Media Queries

Question

I am trying to adapt my tablet web app for use on cell phones. The Media Query functionality seems perfect and my initial testing bears this out. The question I have is: with phones and tablets that change their orientation from portrait to landscape (upon rotation of the device) what does max-width then refer to?

In other words, the bigger Android phones have resolutions along the lines of 480x800, the iPhone4 has a resolution of 640x960, and the original Blackberry Torch has a resolution of 360x480. These are all the resolutions (W x H) when the devices are held in portrait mode, so the widths are 400, 640, and 360 respectively. However, when you rotate the device to landscape, the height 'becomes' the width for display purposes. So the effective widths in landscape then become 800, 960, and 480 respectively, and the 800 and 960 widths overlap with tablet landscape widths which messes up the display.

So, is width always width? That is to say, when the device reports its dimensions, does the width value always stay the same for CSS purposes, or does the width value change when the device rotates to landscape?

Thanks to you all in advance.

Answer 1

The width value will change when the device is flipped, because the width of the page being viewed is changing as well.

If you want to query whether the device is being used in landscape or portrait mode, you can use the orientation property instead:

@media screen and (orientation: portrait) {
}

This will check if the width of the browser window is greater than the height (orientation:landscape will do the opposite). For best results, you will probably need to use a combination of many MQ properties using the 'and' operator to chain tests. i.e.:

@media screen and (orientation: landscape) and (max-width: 960px) {
}

a full list of MQ properties is available here.

Answer 2

Value of css changes based on its landscape or not on mobile phone as width and height of display changes on the mobile phone when phone or tablet is rotated. so you have to be specific when defining css style to target what you want.

@media(min-width: 700px) and (orientation: landscape){

}

for detail understanding of media queries visit: http://letsdopractice.com/css-media-queries/