How to Detect ios device using jQuery/JavaScript and hide Bootstrap modal only iPhone and iPad?

Question

Here I attach my jQuery code:

$('.myModal').on('shown.bs.modal', function () { 
var width = $(window).width(); 
var testdevice = /iPhone|iPad|iPod/i.test(navigator.userAgent.toLowerCase()); 
if(!testdevice) { $(this).css('display','block !important'); $(this).show(); } 
else{ $(this).css('display','none !important'); $(this).modal('toggle'); } 
});

---

Here is media query:

@media(max-width: 360px){
    .myModal{
        display: none !important;
    }
}

Answer 1

Detect iOS devices like:

var iOS will be true or false

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
if (iOS)
{
//Hide modal 
}
else{
//show modal or do nothing
}