Question

此脚本适用于chrome，mozilla，但不适用于safari，它选择楼下和加载功能

什么是错？谁能帮我？我很累..

  if (window.matchMedia('(min-width:701px)').matches) {
   function toggleNav() {
    if(mySidenav.style.width === "225px"){
        document.getElementById("responsive").style.width = "45px";
        document.getElementById("mySidenav").style.width = "45px";
        document.getElementById("main").style.marginLeft = "45px";
    }else{
        document.getElementById("responsive").style.width = "225px";
        document.getElementById("mySidenav").setAttribute( 'style', 'width:225px !important' );
        document.getElementById("main").style.marginLeft = "225px";
    }

   }
}    

if (window.matchMedia('(max-width:700px)').matches) {
console.log('match');
 function toggleNav() {
    if(document.getElementById("mySidenav").style.width === "100%"){
        document.getElementById("responsive").style.width = "0px";
        document.getElementById("mySidenav").style.width = "0px";
        document.getElementById("main").style.marginLeft = "0px";
    }else{
        document.getElementById("responsive").style.width = "100%";
        document.getElementById("mySidenav").setAttribute( 'style', 'width:100% !important' );
        document.getElementById("main").style.marginLeft = "100%";
    }

    }
  }

Answer 1

我将对其进行检测，并具有野生动物园的新功能

   var sidenava = document.getElementsByClassName('sidenava');
  var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if(is_safari){
var w,b;
w = window.outerWidth;
if(w > 700){
    b = '225px';
}else{
    b = '0';
}
function toggleNav() {
    if(mySidenav.style.width === b){
        document.getElementById("responsive").style.width = "0px";
        document.getElementById("mySidenav").setAttribute('style', 'width:0px !important');
        document.getElementById("main").style.marginLeft = "0px";
        document.getElementById("mainContent").style.marginLeft = "0px";
        document.getElementById("footer_wrapper").style.marginLeft = "0px";
    }else{
        document.getElementById("responsive").style.width = "225px";
        document.getElementById("mySidenav").setAttribute('style', 'width:225px !important');
        document.getElementById("main").style.marginLeft = "225px";
        document.getElementById("mainContent").style.marginLeft = "225px";
        document.getElementById("footer_wrapper").style.marginLeft = "225px";
        document.getElementById("dashboard").onclick = function() {closed()};
        document.getElementById("form").onclick = function() {closed()};
        function closed(){
            document.getElementById("mySidenav").setAttribute('style', 'width:0px !important');
            document.getElementById("main").style.marginLeft = "0px";
            document.getElementById("mainContent").style.marginLeft = "0px";
            document.getElementById("footer_wrapper").style.marginLeft = "0px";
            document.getElementById("responsive").style.width = "0px";
           }
       }

    }
 }

Answer 2

对于其他有类似问题的人，我发现Safari既需要“屏幕”规范，又需要宽度。其他浏览器似乎以为您指的是屏幕宽度，但在我看来safri并非如此，因此应该是：

if（window.matchMedia（'screen and（min-width：701px）'）。matches）{}

可能不是所有情况下的解决方案，但对我有用

Javascript Matchmedia在Safari上不起作用

2 个答案: