为移动设备调整 Javascript 功能答案

【问题标题】：Adjust Javascript function for Mobile Devices为移动设备调整 Javascript 功能
【发布时间】：2018-10-23 19:58:47
【问题描述】：

我有一个 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 语句？但我不知道如何实现它。

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

提前致谢，如果您需要其他任何信息，请告诉我！

【问题讨论】：

使用 CSS 创建响应式设计可能会更好
为此使用媒体查询。客户端嗅探极难维护，被广泛认为是不好的做法。
例如我的手机是 Jolla 手机（你的 JS 会错过 - 媒体查询不会）。
@ADyson，我如何将其传输到 CSS？ :hover 的“点击”版本是什么？我的想法是对的吗： button:active popup{ width 33%; } 和我的不同宽度的媒体查询中的相同？
响应性的全部意义在于它会自动发生，用户无需单击任何内容即可使其工作。页面（以及其中的元素）只会适当地调整自身大小而不会被要求。但是如果你想设置一个只适用于当前被点击的东西的样式，那么是的，你会使用 :active。并且您可以为需要更改它的每个媒体查询设置不同的值（例如，为移动/台式机/平板电脑设置不同的宽度）。不知道为什么你只想在被点击时改变按钮的宽度？

标签： javascript html css responsive-design media-queries

【解决方案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 媒体查询可能是更优雅的解决方案，但我想让您知道您确实非常接近于做您想做的事情:)

【讨论】：