JavaScript媒体查询问题：窗口≤350px时代码不生效，仅resize时触发

嘿，这个问题太常见啦！你的脚本只监听了窗口大小调整的事件，但页面首次加载时并没有主动去检查当前的视口尺寸——所以如果一开始窗口就≤350px，函数根本没机会执行。别担心，有两种简单又靠谱的办法能搞定：

方法一：页面加载时手动调用函数 #

最直接的方式就是在定义完处理函数后，立刻手动执行一次，这样不管页面加载时窗口多大，都会先做一次检查。修改后的代码如下：

var h1 = document.getElementById("h1");
var mediaQuery = window.matchMedia('(max-width: 350px)');

function h1Text(){
  if(mediaQuery.matches){
    h1.innerHTML = "Text 1";
  } else {
    // 记得加上这段！不然窗口放大后文本不会恢复成原来的样子
    h1.innerHTML = "Text";
  }
}

// 页面加载时先执行一次，确保初始状态正确
h1Text();
// 继续监听窗口resize事件，处理后续的尺寸变化
window.addEventListener('resize', h1Text);

方法二：监听媒体查询的状态变化（更优雅） #

如果你不想监听整个resize事件（毕竟resize会频繁触发），可以直接监听媒体查询的change事件——它只会在视口尺寸跨越350px这个阈值时才触发，性能更好。同样，别忘了初始加载时手动触发一次检查：

var h1 = document.getElementById("h1");
var mediaQuery = window.matchMedia('(max-width: 350px)');

function handleMediaChange(e) {
  if(e.matches){
    h1.innerHTML = "Text 1";
  } else {
    h1.innerHTML = "Text";
  }
}

// 初始加载时先检查一次当前状态
handleMediaChange(mediaQuery);
// 监听媒体查询的匹配状态变化
mediaQuery.addEventListener('change', handleMediaChange);

小提醒 #

一定要记得处理else分支哦！不然当窗口从小于350px放大到大于350px时，文本不会自动恢复成原来的"Text"，用户体验会打折扣~

内容的提问来源于stack exchange，提问作者MWR