React.js CSS ウィンドウの幅

Question

React を使用してレスポンシブ Web サイトを開発しています。スタイル設定には CSS スタイルシートを使用します。レスポンシブ部分は @media クエリを使用して CSS に実装されます。

問題は、Chrome を使用すると要素が大きく表示され、レイアウトが小さな画面 (タブレット) からサイトにアクセスしているように見えることです。私の理解では、Chrome はビューポートが小さいと「考え」、メディア クエリに適切な情報で応答します。

問題は、一定期間の通常作業後の開発プロセス中に発生しました。

私の何が間違っているのでしょうか?どうすれば修正できますか?

注: Firefox で Web サイトを開くと、すべてが正常に動作します。また、Chrome で開発ツールを開き (F12 を確認)、「デバイス ツールバーの切り替え」を true (Ctrl Shift M) に設定すると、寸法が正しく設定されます。この問題は「通常のChrome」を使用している場合にのみ発生します。

Answer 1

要素が大きく表示され、デバイスの幅に基づいてデザインしたい場合は、vw (viewWidth) を使用して要素のサイズを設定します。 vh を使用して、デバイスの高さに基づいて寸法を設定します。 フォントサイズやdiv要素の高さ・幅などを設定できます。携帯電話の使用時にフォントや幅が小さくなりすぎないように、メディア クエリでこの機能を使用します。