如何在Phonegap中定位不同的主题/布局

Question

我是Phonegap的新手，想知道是否可以使用基于设备操作系统的CSS来定位不同的主题/布局？即一个布局＆amp;特定于Android的主题，另一个特定于iOS，另一个特定于Windows等。

显然，我希望保持UI / UX尽可能接近原生体验。

Answer 1

您可以使用JavaScript通过

将类添加到主体以获取特定于设备的样式

document.body.className += (" " + window.device.platform);

在CSS中，您可以定位特定设备，例如

.iOS #navbar { background-color: #000; }

您可以从API

中找到Phonegap检测到的设备名称

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"