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，否则，每个文件都有一个不同的文件。