Angular использует различные шаблоны представления на основе мобильного или настольного компьютера

Question

Я работаю над приложением, в котором мне нужно отображать различные представления при открытии сайта на компьютере или мобильном устройстве. У меня есть адаптивный дизайн на месте но я хочу использовать ионные компоненты, когда сайт просматривается на мобильном телефоне (в основном, PWA). Каков наилучший подход для отображения различных представлений на настольном и мобильном устройствах?

В настоящее время я использую один шаблон с флагом, который определяет браузер userAgent и отображает представления с помощью простого ngIf, например

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

Answer 1

Используйте медиа-запросы, чтобы установить размер шрифта вашего тела в пикселях, а затем пользовательские EM и / или REMs, чтобы изменить размер всего остального.Обязательно всегда используйте отображение FlexBox в CSS Здесь является примером.