如何为PhoneGap应用程序提供两种不同的UX/UI

How to have two different UX/UI for a PhoneGap application

本文关键字：UX UI 两种 PhoneGap 应用程序      更新时间：2024-05-14

我正在构建一个PhoneGap跨平台混合应用程序
在我的应用程序中，我支持iPad和iPhone
两种设备的用户界面不同，但业务逻辑相同。

所以问题是，如何为两种不同的设备使用两个不同的用户界面（HTML/CSS），并为这两种设备使用通用的业务逻辑代码（JavaScript）。

我只想重写应用程序的UX/UI并重用与业务逻辑相关的代码，我该如何设计我的应用程序来做到这一点。

首先，您需要检测正在运行的平台。有很多方法可以实现这一点，但我只举一个简单的例子（并假设您也在使用jQuery）

if ( navigator.userAgent.match(/iPad/i)) {
    $('head').append('<link rel="stylesheet" href="ipad.css">');
}else if (navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPhone/i) ){
    $('head').append('<link rel="stylesheet" href="iphone.css">');
}else{
    // up to you here
}

有更好的方法来检测平台，但这对初学者来说是可行的。

一些JavaScript前端框架（如Ionic、Sencha Touch）支持主题，您可以使用这些框架根据设备类型呈现不同的用户体验，同时共享逻辑。为您的JavaScript提供一个模型-视图-控制器体系结构也会有所帮助。

与其自己尝试匹配用户代理，您可能想使用Cordova设备插件来确定您在哪个设备上运行并做出相应的反应，您还可以使用CSS媒体查询，就像使用常规响应web应用程序/网站一样。如果你想区分手机和平板电脑，并且不使用可以为你做到这一点的JS框架，那么使用"is tablet"插件可能会有所帮助。

在平台层面（而不是设备层面），Cordova的一个功能是"合并"概念，它可以让你在每个平台上创建新的CSS/JS/images/whatever，并在构建过程中将其与内容或www文件夹合并。

相关文章：