0

每次文档准备好或调整视口大小时，我都需要一个查询来检查视口宽度。原因是我希望主导航对于不同的视口宽度具有不同的外观和行为。

//EventListener to get viewport width on load
window.addEventListener("load", function () {
    window.loaded = true;
});

//get Window Size on Resize
var width = $(window).width();
$(window).on('resize', function reportWindowSize() {
  if ($(this).width() != width) {
    width = $(this).width();
    console.log(width);
  }
});

然后我想我需要这样的查询：

If (page loaded OR viewport width changes) {
   if (viewport width > x) {
     do things

} else if (viewport width < x) {
     do other things
  }
};

什么是形成If (page loaded OR viewport width changes)JavaScript 或 jQuery 表达式的好方法？

4

1 回答 1

0

正如 Terry 在他的评论中指出的那样，您可以创建一个函数并在您需要的每个场景中重用它。

IE

function checkWidth() {
  let windowWidth = $(window).width();
  let maxWidth = 1000;
  if(windowWidth < maxWidth) {
    // do your stuff
  }
}

$(document).ready(function() {
  checkWidth();
});

$(window).on('resize', function() {
  checkWidth();
});

另一种解决方案是在 JS 中使用媒体查询。

您可以像在 CSS 中一样使用以下代码监视媒体查询：

if (matchMedia) {
  let mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(checkWidth);
  checkWidth(mq);
}

// media query change
function checkWidth(mq) {
  if (mq.matches) {
  // do your stuff
  }
}

您需要在添加事件监听器后调用 checkWidth 以确保它在页面加载时执行。

我从以下网址得到这个例子：https ://www.sitepoint.com/javascript-media-queries/

于 2019-05-25T07:37:37.880 回答