window.matchMedia JavaScript在Chrome瀏覽器上返回錯誤結果版本54.0.2840.98（64位）

Question

要確定視口的模式（橫向/縱向），我想根據blogpost的提示使用David Walsh（Mozilla的）以及Paul Irish（谷歌）普及的polyfill。

Caniuse說matchMedia api的crossbrowser支持很棒！

所以我在我的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 

大聲笑。我甚至沒有調整瀏覽器的大小（chrome），它返回了一個結果。這是一件事，另一種是在第一次加載mql.matches時返回錯誤答案：false。

由於Chrome瀏覽器是一個主流瀏覽器，我認爲這是一個不能去使用matchMedia api，除非有人已經找到了解決這個問題的方法。這正是我的問題：是否有其他人遇到並解決了這個問題？

我知道關於issues的window.orientation API，所以我不能使用它。

Answer 1

只有在使用webpack模塊打包程序加載應用程序時，纔會發生這種情況。在頁面的頭部使用簡單的腳本標記，而不是爲我修復它。

此外，我完全擺脫了webpack。