javascript - 如何在不更改浏览器尺寸的情况下调用 matchmedia 函数

Question

我不是很擅长 javascript，但我尝试了这个功能。

<script> 

function myFunction(divswitch) {
  if (divswitch.matches) { // If media query matches

  } else {

  }
}

var divswitch = window.matchMedia("(max-width: 640px)")
myFunction(divswitch) // Call listener function 
divswitch.addListener(myFunction) // Attach listener 


</script>

仅当用户切换浏览器尺寸时才会调用脚本。有人可以为用户修复代码，这不会切换他们的浏览器尺寸。它适用于手机等小于 640 像素的屏幕。

Answer 1

你需要这样的东西：

function logMatchStatus(divswitch) {
  if (divswitch.matches) { 
    console.log("It matches");
  } else {
    console.log("It doesn't");
  }
}

window.addEventListener('resize', function() {
    var divswitchExample = window.matchMedia("(max-width: 640px)");
    logMatchStatus(divswitchExample);
})

我更改了一些名称以使其更有意义（并且我鼓励您始终这样做）但保持您的代码相同。

您可以在此处和此处阅读有关 addEventListener的信息

另请注意，在我的示例中，我使用resize事件，因此您可以运行代码片段、检查控制台并更改窗口宽度以确保其正常工作。如果您需要您的功能仅在页面加载时触发，请替换'resize'为'load'

Answer 2

好吧，重要的是，脚本在页面加载和调整大小时运行。这就是我写这个脚本的原因。

function mobilefix(divswitch) {
  if (divswitch.matches) { // If media query matches
    $("#divid").insertAfter("#otherdivid")
  } else {
    $("#otherdivid").insertAfter("#divid")
  }
}  

var divswitch = window.matchMedia("(max-width: 640px)");
window.addEventListener('load', function() {
    mobilefix(divswitch);
})
window.addEventListener('resize', function() {
    mobilefix(divswitch);
})

谢谢@vicodin

代码有点长。但结果如预期。

唯一的问题是如何在更短的媒体大小的基础上更改 2 个 div。但不是那么重要。