#angular #typescript #angular7 #user-agent #progressive-web-apps
#angular #typescript #angular7 #user-agent #progressive-веб-приложения
Вопрос:
Я работаю над приложением, в котором мне нужно отображать разные представления при открытии сайта на настольном компьютере или мобильном устройстве. У меня есть адаптивный дизайн, но я хочу использовать компоненты ionic при просмотре сайта на мобильных устройствах (в основном pwa). Каков наилучший подход для отображения разных представлений на настольном компьютере и мобильном устройстве?
В настоящее время я использую один шаблон с флагом, который определяет пользовательский агент браузера и отображает представления с помощью простого ngIf, например
<div *ngIf="isMobile">
Mobile screen
</div>
<div *ngIf="!isMobile">
Desktop Screen
</div>
Комментарии:
1. Используйте мультимедийные запросы CSS. Также не определяйте «мобильный», который вы хотите определить по размеру экрана. Стоит повторить итерацию: очень редко бывает хорошей идеей использовать перехват пользовательского агента. Вы почти всегда можете найти лучший, более широко совместимый способ решения вашей проблемы!
2. @Liam спасибо. это было полезно
Ответ №1:
Используйте медиа-запросы, чтобы задать размер основного шрифта в пикселях, затем пользовательские EMS и / или REMS для изменения размера всего остального. Убедитесь, что всегда используете FlexBox display в CSS, вот пример.
Ответ №2:
import { HostListener } from '@angular/core';
@HostListener('window:resize', ['$event'])
async resizeScreen(event?) {
if(window.innerHeight==pass screen size)
{
console.log('Do mobile work');
} else if(window.innerHeight<=pass desktop screen size limit)
{
console.log('Do desktop work');
}
}