设备布局使用媒体查询 - 手机上的肖像，两者都在平板电脑上

Question

我有一个使用jQuery Mobile和PhoneGap创建的Android移动应用程序。我希望有3种不同的布局，具体取决于设备和方向：

1. 人像电话 - 在智能手机上我想使用始终纵向布局
2. 人像平板电脑 - 与手机不同
3. Landscape tablet

这可以通过CSS媒体查询实现吗？我知道可以改变布局，但不知道如何仅为智能手机强制纵向布局，同时允许平板电脑的横向布局。

Answer 1

大多数设备都属于以下3种分辨率 1）HVGA- VGA的一半（320 x 240）
2）WVGA宽VGA（800x 480） - 近1.5倍的HVGA
3）HVGA 2x-（640 X 960） - IPHONE 4使用这个决议

满足您的要求
1）＆amp; 2）您可以在@media中编写样式，如下所示。你可以使用HVGA或WVGA。根据需要更改宽度和高度

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

3）对于横向视图，使用方向：横向如下例

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

代码段仅供参考。您的需求可能会有所不同，请根据您的需要更改屏幕/仅，最小设备像素比，最大设备像素比等参数