如何使用 Meteor 为移动应用程序和 Web 浏览器构建不同的 UI答案

【问题标题】：How can I use Meteor to build different UI for mobile apps and web browsers如何使用 Meteor 为移动应用程序和 Web 浏览器构建不同的 UI
【发布时间】：2015-10-22 11:51:25
【问题描述】：

我有一个项目需要一个 Bootstrap 响应式网络浏览器应用程序和一个移动应用程序（带有离子组件）。我怎样才能用 Meteor 做到这一点？我可以使用相同的代码库吗？

【问题讨论】：

标签： cordova meteor

【解决方案1】：

是的，你可以。在TyPhone 中，我们将用于移动设备的 Ionic 和用于 Web 的 Semantic-UI 结合起来。您可以使用 Bootstrap 轻松地做到这一点。

TyPhone is open source，所以请随意查看，但基本的想法是让 Iron-router 发送不同的模板。

Router.route('/', function () {
    if (Meteor.isCordova) {
        this.layout('layout');
        this.render('mobile');
    } else {
        this.render('web');
    }
});

您可能仍需要确保 CSS 文件不会互相踩到对方的脚，但这是开始的好方法。

编辑：

我遇到的一个问题是 ionic 使 body 无法滚动，因此我需要在 web 版本上覆盖 body 的 overflow 属性。我就是这样做的：

JS：

Template.web.onRendered(function() {
    $("body").addClass("web");
});

CSS：

body.web {
    overflow: auto;
}

【讨论】：

谢谢！这既简单又聪明。您是否使用任何特定的方法来处理 CSS 冲突（如果有）？很棒的应用程序，顺便说一句！
这是唯一有点丑的部分。我希望 Iron-router 允许您为每条路由提供不同的 css 文件或不同的头，但据我所知，它不会。因此，您可能需要自己解决冲突。我在上面的答案中添加了一个示例（关于overflow）。
您好！我认为对 CSS 冲突有一个很好的解决方案。如果您使用的是 LESS 或 Sass ，则可以执行类似 .web{@import bootstrap.scss} 的操作