React を使用してレスポンシブ Web サイトを開発しています。スタイル設定には CSS スタイルシートを使用します。レスポンシブ部分は @media クエリを使用して CSS に実装されます。
問題は、Chrome を使用すると要素が大きく表示され、レイアウトが小さな画面 (タブレット) からサイトにアクセスしているように見えることです。私の理解では、Chrome はビューポートが小さいと「考え」、メディア クエリに適切な情報で応答します。
問題は、一定期間の通常作業後の開発プロセス中に発生しました。
私の何が間違っているのでしょうか?どうすれば修正できますか?
注: Firefox で Web サイトを開くと、すべてが正常に動作します。また、Chrome で開発ツールを開き (F12 を確認)、「デバイス ツールバーの切り替え」を true (Ctrl Shift M) に設定すると、寸法が正しく設定されます。この問題は「通常のChrome」を使用している場合にのみ発生します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
要素が大きく表示され、デバイスの幅に基づいてデザインしたい場合は、
vw(viewWidth) を使用して要素のサイズを設定します。vhを使用して、デバイスの高さに基づいて寸法を設定します。 フォントサイズやdiv要素の高さ・幅などを設定できます。携帯電話の使用時にフォントや幅が小さくなりすぎないように、メディア クエリでこの機能を使用します。