css - Phonegap 移动应用程序的独立 CSS 模板

Question

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

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

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

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

谢谢!

Answer 1

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

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