如何在一个应用程序中实现自适应网页设计

【问题标题】：How to implement Adaptive web design in one application如何在一个应用程序中实现自适应网页设计
【发布时间】：2016-10-12 22:31:52
【问题描述】：

有没有办法在一个组件中包含 2 个模板？例如，我的意思是我正在构建的网站不是响应式网页设计。因此，有 2 种不同的视图，桌面视图和移动视图。我想为两者使用相同的应用程序。如何在基于用户设备的组件中切换两个模板（一个用于桌面视图，一个用于移动视图）？这可能吗？

【问题讨论】：

如果我理解正确，您能否检查一下这是否回答了您的问题？否则可能需要澄清：stackoverflow.com/questions/25620368/…

标签： angular

【解决方案1】：

首先，您必须在初始化时检测屏幕大小并设置一个特殊标志以了解应用当前运行的设备。

initializeRWD() {
    if (screen.width < 1080) {
        this.isSmallScreen = true;
    } else {
        this.isSmallScreen = false;
    }
}

接下来，我会在您的模板中添加<div class="desktop"> 和<div class="mobile">，并根据屏幕大小显示它们中的任何一个，例如：

<div class="desktop"> *ngIf="!isSmallScreen">
    <!-- desktop code here -->
</div>

<div class="mobile" *ngIf="isSmallScreen">
<!-- mobile code here -->
</div>`

【讨论】：