0

我正在构建一个具有两种布局的 Phonegap 应用程序：一种用于“手持设备”，一种用于“平板电脑”。我希望大于 6 英寸的设备显示平板电脑布局，而较小的设备使用手持式布局。

我调查了媒体查询。我担心的是，如果我按像素大小定位设备，例如 iPad1 768px，则会出现一台也符合此查询条件的高密度手持设备，显示错误的布局并使文本不可读且小部件太小。我已经考虑webkit-min-device-pixel-ratio > 2过这个查询，但这不会留下“间隙”，分辨率和像素比的不幸组合会触发手持设备上的平板电脑模板吗？

那么，当设备加载时，我可以遵循什么一般策略来可靠地“选择”这两种布局中的一个（并避免设备之间的重叠）？我只支持纵向模式，我可以更改所有的 CSS、JS<meta name="viewport">等。

本质上，我希望能够提出一些规则来区分此处的第 2 列和第 3 列http://nmsdvid.com/snippets，但不针对特定的设备型号。

谢谢！

4

1 回答 1

1

我认为媒体查询中的像素宽度仍然是标准宽度，所有当前的 iphone 显示的文档宽度都是 320 像素。这是因为 phonegap 中使用的 UIwebview 只是一个标准的浏览器环境。

我的 css 需求取决于我的应用程序的 iphone 和 Ipad 版本之间的交叉量。如果 css 几乎相同，我将使用媒体查询在一个 CSS 文件中为 Ipad 设备提供额外的 css，否则我将为每个设备提供不同的文件。

于 2013-05-11T10:44:46.440 回答