如何强制window.matchMedia匹配规则在页面加载时执行？

我最近留意到CSS媒体查询和JavaScript的window.matchMedia()在执行逻辑上存在一个关键差异，这里给大家梳理清楚：

核心区别 #

• CSS媒体查询：页面加载完成后会立即匹配并应用对应的样式规则——不管当前视口是一开始就符合查询条件，还是后续变化触发的，规则都会第一时间生效。
• window.matchMedia()：默认情况下，它不会在页面加载完成后自动执行匹配逻辑，只有当视口状态发生变化、进入新的匹配条件时才会触发对应的回调函数。

示例对比 #

举个实际场景的例子：我们要针对最小宽度为768px的视口做布局调整，分别用两种方式实现：

CSS实现方式 #

在<style>标签中定义规则：

@media (min-width: 768px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

页面加载时，如果当前视口宽度已经≥768px，这个样式会直接生效，完全不需要等待视口发生变化。

JavaScript实现方式 #

用matchMedia实现等效逻辑：

const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleMediaChange(e) {
  if (e.matches) {
    document.querySelector('.container').style = 'width: 80%; margin: 0 auto;';
  } else {
    document.querySelector('.container').style = '';
  }
}

// 仅监听视口变化事件
mediaQuery.addEventListener('change', handleMediaChange);

这种写法下，页面加载时如果视口已经≥768px，handleMediaChange函数不会自动执行，只有当视口从<768px变为≥768px时，才会触发回调执行逻辑。

让JS逻辑和CSS行为对齐 #

如果想让JS的媒体查询逻辑在页面加载时也立即生效，只需要在添加事件监听后手动调用一次回调函数即可：

// 先手动执行一次，处理初始视口状态
handleMediaChange(mediaQuery);
// 再监听后续的视口变化
mediaQuery.addEventListener('change', handleMediaChange);

这样不管页面加载时视口是否符合条件，逻辑都会第一时间执行，和CSS的行为保持一致。

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