问题
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:
- Portrait phone - on smartphones I want to use always portrait layout
- Portrait tablet - different than on phone
- 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.
回答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
来源：https://stackoverflow.com/questions/13693487/device-layouts-using-media-query-portrait-on-phones-both-on-tablets