React.js CSS window width

Question

I am developing a responsive website using React. For styling, I use CSS stylesheets. The responsive part is implemented in CSS using @media queries.

The problem is that when I use Chrome, the elements appear larger and the layout is like I'm accessing the site from a smaller screen (tablet). My understanding is that Chrome "thinks" the viewport is smaller and responds to media queries with the appropriate information.

The problem occurred during the development process, after a period of normal work.

What am I doing wrong and how can I fix this?

Note: When opening the website in Firefox, everything works fine. Also, when I open the dev tools in Chrome (check F12) and set "Switch Device Toolbar" to true (Ctrl Shift M), the dimensions are set correctly. This problem only occurs when using "Normal Chrome".

Answer 1

If an element appears larger and you want to design based on the width of the device, use vw (viewWidth) to set the size of the element. Use vh to set dimensions based on the height of the device. You can set font size, height/width of div elements, etc. Use this feature in your media queries so that the font or width does not become too small when using mobile phones.