1

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

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

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

4

1 回答 1

1

大多数设备将采用以下 3 种分辨率
1) HVGA-VGA 的一半 (320 x 240)
2) WVGA-wide VGA(800x 480) - 几乎是 HVGA 的 1.5 倍
3) HVGA 2x- (640 x 960) - IPHONE 4 使用此分辨率

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

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

3）对于横向视图，请使用orientation:landscape，如下例所示

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

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

于 2012-12-07T13:42:07.563 回答