javascript - 根据视口(viewport)宽度禁用/启用 javascript

Question

我创建了一个导航栏，它需要 400 像素的 javascript，但低于 400 像素我不需要它。

由于加载的页面大于 400 像素，然后将其调整到低于 javascript 的大小，这会导致不良效果。 (加载小于 400px 的页面然后将其调整为大于)也是如此。 https://jsfiddle.net/abp1rwhp/4/

我正在使用

if(screen.width < 400)

正如我所解释的那样，直到用户调整窗口大小为止。有谁知道可以解决我的问题的方法吗？

Answer 1

这应该可以解决 .nav 是导航的 css 选择器的问题

var showHideMyNav = function () {
    if (window.outerWidth < 400) {
        var nav = document.querySelector(".nav");
        nav.style.visibility = "hidden"; // $('#nav-bar').hide();
    } else {
        nav.style.visibility = "visible"; // $('#nav-bar').show();
    }
};
window.addEventListener('resize', showHideMyNav); // $(window).on("resize, ...);