Question

I have an Android mobile app created with jQuery Mobile and PhoneGap. I would like to have 3 separate layouts depending on device and orientation:

1. Portrait phone – on smartphones I want to use always portrait layout
2. Portrait tablet – different than on phone
3. Landscape tablet

Is this possible to achieve with CSS media queries? I know changing layouts is possible, but not sure how to force portrait layout only for smartphones and at the same time allow landscape for tablets.

Answer 1

Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240)
2) WVGA- wide VGA(800x 480) – nearly 1.5 times of HVGA
3) HVGA 2x- (640 X 960) – IPHONE 4 uses this resolution

for your requirements

1) & 2) you can write your styles inside @media as below. you can use HVGA or WVGA. Change width and height as per your need

@Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
} 

3)For a landscape view use orientation:landscape like in below example

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
/* css files here */
}

The code piece is just for your reference . Your needs may be different, Please change parameters like screen/only ,min-device-pixel-ratio, max-device-pixel-ratio etc as per your needs