使用媒体查询设备的布局 - 肖像在手机上，无论是在平板电脑上 [英] Device layouts using media query - portrait on phones, both on tablets

问题描述

我有使用jQuery Mobile和PhoneGap的创建Android移动应用程序。我想有根据设备和方向3个独立的布局：

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. 人像手机 - 智能手机我要永远使用纵向布局


2. 人像片 - 比手机不同


3. 景观平板电脑

这是可能实现与CSS媒体查询？我知道改变的布局是可能的，但不知道如何强制纵向布局仅适用于智能手机，并在同一时间让平板电脑的风景线。

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.

推荐答案

大部分设备都将在以下3分辨率

1）VGA的HVGA一半（320×240）
2）WVGA-宽VGA（800×480） - HVGA的近1.5倍
3）HVGA 2x-（640 X 960） - IPHONE 4的用途这项决议

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

您的要求

1）及2）你可以如下写你的风格里面@media。您可以使用HVGA或WVGA。更改宽度和高度根据自己的需要

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）对于横向视图使用方向：横向像下面的例子

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 */
}

在code片只是供大家参考。您的需求可能有所不同，请更换屏幕一样/只，最小的设备像素比，最大的设备像素比等参数，按您的需求。

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

这篇关于使用媒体查询设备的布局 - 肖像在手机上，无论是在平板电脑上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！