モバイルブラウザでは入力時にテキストエリアのサイズを変更します

Question

私は基本的なメモ採取用のPWAを設計しています。私のウェブサイト（https://cloudwerewolf.github.io）はデスクトップブラウザでうまく機能し、モバイルではPWAとしてホーム画面から起動しますブラウザがリンクに直接ナビゲートするのではなく、それらのいずれかがクリックされたときにすべてのテキストエリアが縮小し、縮小する代わりに以前と同じサイズのままテキストエリアを維持します。それはキーボードがスクリーンの知覚される幅を狭めているか、それとも別の原因があり、それをどうやって修正できるのでしょうか？

EDITは：

@media screen and (orientation:landscape) { 
    textarea { 
     width: 43.5%; 
    } 
    #notehead { 
     width: 20.5%; 
    } 
    #reH { 
     font-size: 24px; 
    } 
} 
@media screen and (orientation:portrait) { 
    textarea { 
     width: 80%; 
    } 
    #notehead { 
     width: 35%; 
    } 
} 

キーボードは私の画面上に登場したとき、CSSは向きが今、ビューポートの幅に起因する風景は今、ビューポートの高さよりも小さいこと、および変更されたことを決めた：&は、問題を修正しましたテキストエリアのサイズとそれに応じたフォントサイズ私はそのコードを取り出し、通常のtextarea {}および#notehead {} CSS領域に配置されたポートレートモードの幅の割合で置き換えました。最大幅はピクセル単位で、テキストエリアがデスクトップ上で広すぎないようにしました。

Answer 1

CSSでは、テキストエリアをmin-width: 80%に設定しているため、画面サイズが縮小されると、テキストエリアがここから制限（80％）に達するまで縮小され、テキストエリアは縮小されません。多分質問にあなたのコードを表示してみてくださいmin-width: 80%min-width: 20%へ

を削減

試して、私たちはあなたのウェブサイトへのリンクを入れていない、このように問題を解決するお手伝いをすることができます。