Largeur de la fenêtre CSS React.js

Question

Je développe un site web responsive en utilisant React. Pour le style, j'utilise des feuilles de style CSS. La partie responsive est implémentée en CSS à l'aide de requêtes @media.

Le problème est que lorsque j'utilise Chrome, les éléments apparaissent plus grands et la mise en page donne l'impression que j'accède au site depuis un écran plus petit (tablette). Je crois comprendre que Chrome "pense" que la fenêtre d'affichage est plus petite et répond aux requêtes multimédias avec les informations appropriées.

Le problème est survenu lors du développement, après une période de travail normal.

Qu'est-ce que je fais de mal et comment puis-je résoudre ce problème ?

Remarque : lors de l'ouverture du site Web dans Firefox, tout fonctionne correctement. De plus, lorsque j'ouvre les outils de développement dans Chrome (cochez F12) et que je règle "Switch Device Toolbar" sur true (Ctrl + Shift + M), les dimensions sont définies correctement. Ce problème ne se produit que lors de l'utilisation de "Chrome normal".

Answer 1

Si un élément semble plus grand et que vous souhaitez concevoir en fonction de la largeur de l'appareil, utilisez vw (viewWidth) 来设置元素的大小。使用 vh pour définir les dimensions en fonction de la hauteur de l'appareil. Vous pouvez définir la taille de la police, la hauteur/largeur des éléments div, etc. Utilisez cette fonctionnalité dans vos requêtes multimédias afin que la police ou la largeur ne devienne pas trop petite lors de l'utilisation de téléphones mobiles.