私のウェブページの向きが横に変わって、テキストエリア内にフォーカスしているとズームが変わるのはなぜですか？

Question

スマートフォンでWebページをポートレートで読み込むと、3つの列がすべて下に表示されます。私がランドスケープでロードすると、すべての列が並べて表示されます。これは予想される動作です。

予想される動作ではありませんが、テキストボックスの内側にフォーカスすると、ビューポートが変更されるとレイアウトが崩れます。原因は以下のCSSです。

/* Landscape */ 
@media screen and (orientation:landscape) { 
    #acceptside, #neutralside, #rejectside { width: 33.3% !important; } 
    /* Landscape styles */ 
} 

しかし、風景のときには33％の列を作成することになっています。なぜ、テキストエリアが肖像画に焦点を当てているときに、そのコード行がトリガーされるのですか？

私はここにテスト例があります。 https://compesh.com/test.html

Answer 1

テキストエリアにフォントサイズが大きいためです。フォントサイズを小さくしてみてください（現在2emに設定されています）。

編集：ファイルに ： https://compesh.com/assets/teststylesheet.css ルール：

textarea:focus { 
    min-height: 4.35em !important; 
} 

がこれを引き起こしています。このルールを削除すると、問題が解決されます。