1

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.

filip
  • 1,444
  • 1
  • 20
  • 40

1 Answers1

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

Vidiya Prasanth Pappannan
  • 727
  • 6
  • 16