MediaQuery - LandScapeが意図せずに適用される話（Chrome×Android）

発生した事象

• 事象

  • スマホ縦画面の入力フォームで、キーボードを起動すると、画面スタイルにLandScape用のスタイルが適用される

• 発生条件

  • Chrome×Android環境
  • MediaQueryでLandScape時のスタイルを設定している

• イメージは下記

sample.html

<div class="container">
  <div class="main-content-wrapper">
    <div>こんにちは<div>
  </div>
  <div class="input-wrapper">
    <input type=text placeholder="何か入力して">
  </div>
</div>

sample.css

/* スマホが横向きのときに、コンテンツを横並びにしたい */
@media (orientation landscape) and (max-width: 959px) {
  .container {
    display: flex;
  }
}

調査

• もしかしたら、MediaQueryが何らかの理由で適用されているかもしれないと思い、MediaQuery周りで怪しことがないか調べたら下記の記事を見つけた（古い）

• https://web.archive.org/web/20160509220835/http://blog.abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

• 読んでみると、下記のような記述がありました

When the software keyboard is displayed in Chrome for Android or the stock Android Browser[1] the browser window is resized, which triggers a window.resize event and a window.orientationchange event in JavaScript as well as possibly causing CSS media queries to be reapplied.

• Android×Chromeの場合に、ブラウザウィンドウがリサイズされてしまい、JSではWindowの向きが変わったと認識されたり、CSSのメディアクエリがリサイズされたウィンドウで再適用されてしまうとのこと

解決方法

• こちらを参考にさせていただきました！
  https://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut

• ビューポートのアスペクト比がちゃんとデバイスを横向きにしたときの縦横比になっているかをチェックするようにしています

sample.css

@media (orientation: landscape) and (min-aspect-ratio: 16/9) and (max-width: 959px) {
  .container {
    display: flex;
  }
}

以上です

参考

• https://web.archive.org/web/20160509220835/http://blog.abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

• https://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut