発生した事象

事象
- スマホ縦画面の入力フォームで、キーボードを起動すると、画面スタイルに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;
  }
}

以上です

参考