Verhindern Bootstrap Modal erscheint auf dem Handy und Tablet

Question

Ich versuche zu verhindern, dass das Bootstrap-Modal auf dem Handy und Tablet erscheint. Zur Zeit erscheint das Modal nur für ie9 und darunter. Der Grund dafür ist, dass der Benutzer sich der Einschränkung der Website bewusst sein kann, wenn er einen solchen alten Browser verwendet.

Ich habe versucht mit Beispielen, die auf Stackoverflow zur Verfügung gestellt werden, aber ohne Glück. Hier ist der folgende Code, ich verwende:

/*$(function(){ 
 
       $('##myModal').modal('show'); 
 
      })*/ 
 
\t \t \t function isMobile() { 
 
\t \t \t var isMobile = false; //initiate as false 
 
\t \t \t // device detection 
 
\t \t \t if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true; 
 
\t \t \t return isMobile; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t $(function() { 
 
\t \t \t $('.pop').on('click', function() { 
 
\t \t \t \t if ($(window).width() < 800) || isMobile()) { 
 
\t \t \t \t console.log("model not showed!!"); 
 
\t \t \t \t console.log("isMObile : " + isMobile()); 
 
\t \t \t \t console.log("screen size :" + $(window).width() + "px min is 800px"); 
 
\t \t \t \t } else { 
 
\t \t \t \t $('##myModal').modal('show'); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t });

<div class="ie-only" style="overflow-y:hidden;"> 
 
     \t <div class="modal fade in" id="myModal" aria-hidden="false"> 
 
      \t <div class="modal-dialog modal-md custom-height-modal"> 
 
       \t <div class="modal-content"> 
 
        \t <div class="modal-header" style="background: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');"> 
 
         \t <button type="button" class="close" data-dismiss="modal">x</button> 
 
          <h2 class="modal-header">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br /> 
 
          <b>Use the links below to download a new browser or upgrade your existing browser.</b></p>      
 
         </div><!---Modal-Header Div---> 
 
         <div class="modal-body client_logos"> 
 
         \t <!---<p> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Firefox-logo.svg/120px-Firefox-logo.svg.png" alt="image" /> 
 
          \t <img class="img-responsive" src="https://productforums.google.com/forum/image/GDF/15104268797498972201/8f39d8ec-5483-4e30-977d-817c8fd1c110" /> </p>---> 
 
         </div><!---Modal-Body Div---> 
 
         <div class="modal-footer"> 
 
         \t <p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p> 
 
         </div><!---Modal-Footer Div---> 
 
        </div><!---Modal-Content Div---> 
 
       </div><!---Custom Height Div---> 
 
      </div><!---Modal Fade in Div---> 
 
     </div><!---Start of Modal Div---> \t \t \t \t 
 
\t \t <!--End of Modal container-->

Jede Hilfe würde geschätzt.

Answer 1

Nahm .substr(0,4) und einige zusätzliche Klammer und das funktioniert wie seine Logik umreißt: „Mobile“

function isMobile() { 
    var isMobile = false; //initiate as false 
    // device detection 
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent)) isMobile = true; 
    return isMobile; 
} 

$(function() { 

    if ($(window).width() < 800 || isMobile()) { 
     $('body').append('Mobile!'); 
    } else { 
     $('body').append('Not Mobile!'); 
    } 

}); 

Sie es festgelegt haben zu werfen wenn der Bildschirm trotz des Geräts kleiner als 800 Pixel ist - nicht sicher, ob das Ihre Absicht war.

EDIT: Plunker https://plnkr.co/edit/lYaYDeUN91I697XJMxLq?p=preview