Мне было интересно, как лучше всего оптимизировать мое приложение для мобильных устройств.
Я знаю, что могу выполнить медиа-запрос css, но я не говорю об этом.
if (window.innerWidth < 450)
Это правильный способ?
Что мне делать, если я не хочу менять весь макет моего приложения, возможно, использовать другие компоненты и маршрутизацию на мобильном устройстве? Лучшее решение, которое я придумал, - это создание двух разных ленивых модулей для мобильных и настольных компьютеров, которые загружаются по-разному для компонентов, оптимизированных для платформы. Мне нравится это решение, но как мне направить пользователя к нужному модулю?
if (window.innerWidth < 450) {
this.router.navigateByUrl('/mobile');
} else {
this.router.navigateByUrl('/desktop');
}
Этот код работает, но проблема в том, что когда я нахожусь на правильном пути к модулю (настольный / мобильный) и перехожу на более глубокий путь, такой как /mobile/pageX
, я перенаправляюсь на /mobile
. Так что это не похоже на хорошее решение
Мне нравится использовать это для получения максимальной и минимальной ширины экрана:
function something() {
if (x.matches) { // If media query matches
// do something
} else if (Y.matches){
//do something
}
}
var x = window.matchMedia("(max-width: 425px)")
var Y = window.matchMedia("(min-width: 426px)")
Спасибо, это хороший способ запросить ширину.
Что касается части 2 вашего вопроса, я не уверен, что делать