CSS Media Queries

Question

I am trying to adapt a tablet application for use on mobile phones. The functionality of Media Query seems perfect, and my initial testing confirms this. I have a question: with phones and tablets that change orientation from portrait to landscape (when the device rotates), what does max-width mean?

In other words, large Android phones have 480x800 resolutions, iPhone4 has a resolution of 640x960, and the original Blackberry Torch has a resolution of 360x480. These are all 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 the landscape, the height "becomes" the width for display purposes. Thus, the effective width in the landscape then becomes 800, 960 and 480, respectively, and the width of 800 and 960 overlaps with the width of the landscape of the tablet, which will ruin the display.

So, is width always width? That is, when a device reports its measurements, does the width value always remain unchanged for CSS purposes, or does the width value change when the device rotates to landscape?

Thank you all in advance.

Answer 1

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

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

@media screen and (orientation: portrait) { } 

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

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

A complete list of MQ properties is available here .

Answer 2

The css value changes depending on its landscape or not on the mobile phone, since the width and height of the display changes on the mobile phone when the phone or tablet is rotated. so you have to be specific when defining a css style to target what you want.

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

}

for a detailed understanding of media queries: http://letsdopractice.com/css-media-queries/

Answer 3

Media queries are used to determine the style for different screen sizes. I will tell you about the basics about media queries. CSS request syntax:

 @media not|only mediatype and (media feature) { CSS-Code; } 

For more on toturial media query syntax syntax, please visit this site.