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

【问题标题】：how i can call the matchmedia function without changing browser dimensions如何在不更改浏览器尺寸的情况下调用 matchmedia 函数
【发布时间】：2019-03-04 19:41:49
【问题描述】：

我的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 像素的屏幕。

【问题讨论】：

您应该将Listener 添加到某个事件，例如resize 或load 您的divswritch 变量不是事件。
不知道怎么做；我试过;此代码： divswitch.addEventListener("load", myFunction);或 window.onload = myFunction(divswitch)

标签： javascript responsive matchmedia

【解决方案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 here 和 here 的信息

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

【讨论】：

【解决方案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 甚至更短。但不是那么重要。

【讨论】：