时间戳

首页 > 解决方案 > 使用 matchMedia，调整窗口大小以修复响应式浏览边缘情况

javascript - 使用 matchMedia，调整窗口大小以修复响应式浏览边缘情况

问题描述

非常感激任何的帮助。

我将网站导航隐藏在切换样式的汉堡菜单后面。对于拥有屏幕/设备的用户@media only screen and (max-width: 750px)

其他所有人，导航始终存在。

当您将桌面浏览器调整大小/缩小为移动查询时，单击汉堡菜单并将其隐藏。然后展开窗口；导航隐藏在大屏幕上。

我使用 mediaMatch 编写了一个小脚本；强迫它的出现。但是，当这两个条件都为真时，它不会运行。

控制台输出 - 分别检查两个条件

mql.matches && getStyle('.header_burger_container', 'display') === 'none'

真的

    const getStyle = (el, at) => {
      let get = document.querySelector(el);
      let style = getComputedStyle(get).getPropertyValue(at);
      return style;
    } 

    let mql = window.matchMedia('(min-width: 751px)');
    window.addEventListener('resize', function() {
      if (mql.matches == 'true' && getStyle('.header_burger_container', 'display') === 'none') {
        document.querySelector('.header_burger_container').style.display = 'block';
        document.querySelector('.header_burger_container ul').style.display = 'block';
      }
    }, false);

你有什么建议可以解决这个问题吗？

标签： javascript

解决方案

我解决了这个问题；说真的，我不确定为什么我的解决方案有效。:s

第一次将函数体与事件侦听器分开。

    const res_nav_resize = () => {
      if (mql.matches && getStyle('.header_burger_container', 'display') === 'none') {
        document.querySelector('.header_burger_container').style.display = 'block';
        document.querySelector('.header_burger_container ul').style.display = 'block';
      }
    }
    window.addEventListener('resize', res_nav_resize);

灵感来自Mozilla window.resize文档。

推荐阅读