window.matchMedia javascript在Chrome版本54.0.2840.98（64位）上返回错误的结果

Question

要确定视口的模式（横向/纵向），我想根据David Walsh（Mozilla的）blogpost的提示以及polyfill推广来使用window.matchMedia保罗爱尔兰（谷歌）。

Caniuse说，对matchMedia api的交叉浏览器支持非常棒！

所以我在Mac上的Chrome版本54.0.2840.98（64位）上测试了以下代码：

const mql = window.matchMedia('(orientation: landscape)');

console.log('loadedThePage', mql.matches) 

mql.addListener(m => {
      console.log('resizeMePlease', mql.matches) 
});

这是我在页面加载时在开发控制台上获得的输出：

loadedThePage false
resizeMePlease true

LOL。我甚至没有调整浏览器（chrome）的大小，它返回了一个结果。这是一回事，另一个是首次加载时mql.matches会返回错误答案：false。

由于Chrome是一个主要的浏览器，我认为除非有人为此找到解决办法，否则无法使用matchMedia api。这正是我的问题：有没有其他人遇到并解决了这个问题？

我知道window.orientation api的issues所以我也不能使用它。

Answer 1

只有在使用webpack模块捆绑器加载应用程序时才会发生这种情况。在页面的头部使用一个简单的脚本标记，而不是为我修复它。

另外，我完全摆脱了webpack。