window.matchMedia JavaScriptはChromeバージョン54.0.2840.98（64ビット）で間違った結果を返します

Question

ビューポートのモード（横/縦）を確認するには、blogpostのヒントごとにwindow.matchMediaを使用したかったのですが、David Walsh（Mozilla ）とpolyfill（Googleの）Paul Irishによって大衆化されました。

Caniuseは、matchMedia apiのクロスブラウザーサポートが素晴らしいと言います！

だから、私はMac上でクロームバージョン54.0.2840.98（64ビット）に以下のコードをテストした：

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

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

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

そして、ここでは、私は、ページの読み込みにDEVコンソールに乗った出力です：

loadedThePage false 
resizeMePlease true 

LOL。私はブラウザ（クロム）のサイズを変更していないし、結果を返しました。それは1つのことであり、もう1つは最初のロード時にmql.matchesが間違った答えを返します：false。

Chromeはメジャーなブラウザなので、誰かがこの問題を回避しない限り、matchMedia APIを使用することはできません。それはまさに私の質問です。他の誰かがこの問題を解決し解決しましたか？

私はissuesのwindow.orientation apiについて知っていますので、どちらも使用できません。

Answer 1

これは、webpackモジュールバンドラを使用してアプリケーションをロードした場合にのみ発生します。代わりに、ページの先頭に単純なスクリプトタグを使用して、私のためにそれを修正しました。

また、私は完全にwebpackを取り除きました。