ウェブサイトの要素とフォントが携帯電話で小さすぎる
新しいプロジェクトの設計とコーディングが終わりました。しかし、私はそれが携帯電話でうまく機能するために必要です。画面の幅を350〜400pxのようなサイズに変更し、コーディングを開始し、メディアクエリを追加しました。再調整されたブラウザで見栄えがします。いくつかの要素と機能をカットしましたが、スマートフォンでテストするまではすべて問題ありませんでした。
画面は大きくありません。 4 '未満（おそらく3.5）。コードにアラートをいくつか挿入したところ、その幅は980pxであることがわかりました。サイズを変更したブラウザでのテストよりも約3倍大きい。
すべてが小さすぎる。他にも素晴らしいものがあります。メディアクエリは機能しており、コードで行ったカットも問題ありませんが、私のモバイルではコンテンツをほとんど見ることができません。これは確かに私が欲しかったものではありません。
私はそれをAppのように見せたい、そして実際、それは再調整されたブラウザ上のアプリのように見えます。
このような問題に対処するためのレスポンシブなWebサイトをどのように作成しますか？
私は[〜＃〜] em [〜＃〜]（およびREMと呼ばれる新しいものがあります）ユニットの使用について何かを読みましたが、それでもまだ混乱しています。すべてのpxをemに変更する必要がありますか？
また、font-sizeをhtmlまたはbodyタグで囲み、他のすべての要素はそれらから継承します。それはアプローチですか？普段は何をしていますか？トリックや何かありますか？ bootstrapも他のフロントエンドフレームワークも使用していません。
viewport<meta>タグを追加してみてください。
<meta name="viewport" content="width=device-width, initial-scale=1">
viewportメタタグを使用してモバイルブラウザーのレイアウトを制御する
メディアクエリ（ リンク ）とパーセンテージ（％）、16px（デフォルトのフォントサイズ）= 100％を使用します。お役に立てば幸いです。