Как отключить модальное окно bootstrap 4 на мобильном телефоне в Wordpress

Question

Я динамически генерирую модальные окна в Wordpress, например:

<a href="'. get_the_permalink() .'" data-toggle="modal" data-target="#modal-'. get_the_ID() .'" class="text-center">
<img src="' . get_the_post_thumbnail_url($post_id) . '" class="img-fluid position-relative mx-auto">
    <h3 class="artist-title text-center w-100 position-absolute align-self-end pb-2">'. get_the_title() .'</h3>
</a>

И хочу отключить, например, data-toggle="modal", чтобы модальные окна не работали на мобильных устройствах и использовали href для go к содержанию.

Answer 1

Как я прокомментировал - сначала я бы избавился от атрибутов данных:

<a href="'. get_the_permalink() .'" class="text-center">

Затем используйте Javascript, чтобы открыть модальное окно, только если ширина вашего окна просмотра больше 400 пикселей:

document.querySelector('a').addEventListener('click',function(e){
    if(window.innerWidth > 400){
        e.preventDefault();
        $('#modal-XXX').modal('show');
    }
});

Answer 2

Уже исправлено со следующим:

var width = $(window).width();  
if(width < 480){
$('.mdl').removeAttr('data-toggle');
}

Не знаю, лучшее ли это решение.