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

标签 javascript html css cordova

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 7 年前

我正在构建一个 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 - 如何为 PhoneGap 应用程序提供两种不同的 UX/UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36549031/

上一篇:javascript - 未选择下拉菜单时更改 css

下一篇:html - 如何在内联 CSS 中定义 CSS 类?

相关文章:

javascript - 我如何使用 JavaScript 转义 JSON 字符串中的 Unicode 字符?

javascript - 如何在命令行上将文件名传递给 emscripten 编译的节点脚本?

html - z-index 不适用于相对定位的元素

python - 将 IPython/Jupyter 中的变量传递给一段 html (%%html)

javascript - “Li”元素显示为 `undefined`

CSS 绝对位置和滚动问题

javascript - 数据绑定(bind)的 secret 是什么?

javascript - 带有 sIDE 3 的文本渐变

javascript - 使用 'X' 图标关闭实现 sidenav

javascript - angular-ui-bootstrap:如何在垂直和水平选项卡集 View 之间切换