Question

我有一个JS函数，可通过将CSS中的宽度从0更改为设置数字来打开弹出窗口。我的目标是在台式机屏幕上将宽度设置为33vw，在移动设备上将宽度设置为100vw，这样它就可以响应。

这是我对SO进行一些研究后所尝试的：

function openNav() {
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth < window.innerHeight) ){
    document.getElementById("Nav").style.width = "100%";
  }
  document.getElementById("Nav").style.width = "33%";
  $('body').addClass('stop-scrolling')
}

我还没有掌握JS的高级知识，但是我觉得我已经接近了并且可能只是缺少ELSE语句？但是我不知道如何实现它。

如果有人可以帮助我并告诉我我做错了什么/错过了，那太好了！

在此先感谢您，如果您还有其他需要，请告诉我！

Answer 1

似乎您实际上只是在丢失else语句-现在的方式是，您首先要检查自己是否在移动设备上（以及是否处于人像模式！），然后，无论结果如何，您都用33％覆盖了导航宽度。

这个小小的修补程序应该可以做到：

function openNav() {
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth < window.innerHeight) ){
        document.getElementById("Nav").style.width = "100%";
    } else {
        document.getElementById("Nav").style.width = "33%";
        $('body').addClass('stop-scrolling');
    }
}

编辑：正如某些人在您的问题下评论的那样，CSS媒体查询可能是更优雅的解决方案，但我想让您知道您确实可以按照自己的意愿去做：）

调整移动设备的Javascript功能

1 个答案: