Ich entwickle eine responsive Website mit React. Für das Styling verwende ich CSS-Stylesheets. Der responsive Teil wird in CSS mithilfe von @media-Abfragen implementiert.
Das Problem besteht darin, dass bei Verwendung von Chrome die Elemente größer erscheinen und das Layout so aussieht, als würde ich über einen kleineren Bildschirm (Tablet) auf die Website zugreifen. Soweit ich weiß, „denkt“ Chrome, dass das Ansichtsfenster kleiner ist, und antwortet auf Medienanfragen mit den entsprechenden Informationen.
Das Problem trat während der Entwicklung auf, nach einer Zeit normaler Arbeit.
Was mache ich falsch und wie kann ich das beheben?
Hinweis: Beim Öffnen der Website in Firefox funktioniert alles einwandfrei. Wenn ich außerdem die Entwicklungstools in Chrome öffne (F12 aktivieren) und „Gerätesymbolleiste wechseln“ auf „True“ setze (Strg + Umschalt + M), werden die Abmessungen korrekt eingestellt. Dieses Problem tritt nur bei Verwendung von „Normal Chrome“ auf.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果元素显得更大并且您想根据设备的宽度进行设计，请使用
vw(viewWidth) 来设置元素的大小。使用vh根据设备的高度设置尺寸。 您可以设置字体大小、div 元素的高度/宽度等。在媒体查询中使用此功能，以便在使用手机时字体或宽度不会变得太小。