Показать загрузочный модаж на мобильных устройствах

Question

Я создал модальный способ предупредить пользователей мобильных устройств о включении своего WIFI, прежде чем переходить на мой сайт с интенсивным использованием данных. Я хотел бы открыть этот модал на мобильных устройствах (xs, s). Я использую bootstrap 4.

Я попытался использовать загрузчик responsive utilities в моем шаблоне, особенно класс .hidden-md-up, но вне зависимости от того, где я использую этот класс, заканчивается некоторое оставшееся наложение, которое отключает некоторые функции сайта. Это потому, что я все еще открываю модальный, а затем скрываю его: не изящное решение.

Я ищу способ использования бутстрапа для восприятия маленького экрана/мобильного устройства. Я использую угловой 2, и поэтому избегаю jQuery. Я еще не использовал jQuery в своем проекте. Было бы хорошо, чтобы избежать загрузки библиотеки только для этой бонусной функциональности

Answer 1

Вы можете использовать matchmedia, как показано ниже, но она опирается на жесткое кодирование ширины, что загрузился изменения в

if (window.matchMedia('(max-width: 767px)').matches) { 
    //load your modal here 
} else { 
    //... 
} 

Если вы не хотите для жесткого кодирования ширины, ознакомьтесь с этим сообщением, чтобы определить разрывы разрыва бутстрапа: https://stackoverflow.com/a/28373319/4553162