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

Question

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

当前，我正在使用带有标志的单个模板，该标志可检测浏览器userAgent并使用简单的ngIf like呈现视图

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

Answer 1

使用媒体查询来设置您的身体字体大小（以像素为单位），然后使用用户EM和/或REM来调整其他所有内容的大小。请确保始终在CSS Here中使用FlexBox显示。