Angular使用基于移动或桌面的不同视图模板

Question

我正在开发一个应用程序，我需要在桌面或移动设备上打开网站时显示不同的视图。我有响应式设计，但我想在移动设备（基本上是pwa）上查看网站时使用离子组件。在桌面和移动设备上显示不同视图的最佳方法是什么？

目前，我正在使用带有flag的单个模板来检测浏览器userAgent并使用简单的ngIf呈现视图

<div *ngIf="isMobile">
     Mobile screen
</div>
<div *ngIf="!isMobile">
      Desktop Screen
</div>

Answer 1

使用媒体查询以像素为单位设置正文字体大小，然后使用用户EM和/或REM来设置其他所有内容。确保始终在CSS中使用FlexBox显示Here就是一个例子。