React를 사용하여 반응형 웹사이트를 개발하고 있습니다. 스타일링에는 CSS 스타일시트를 사용합니다. 반응형 부분은 @media 쿼리를 사용하여 CSS로 구현됩니다.
문제는 Chrome을 사용하면 요소가 더 크게 나타나고 레이아웃이 더 작은 화면(태블릿)에서 사이트에 액세스하는 것과 같다는 것입니다. 내가 이해하는 바는 Chrome이 뷰포트가 더 작다고 "생각"하고 적절한 정보로 미디어 쿼리에 응답한다는 것입니다.
일정 기간 동안 정상적으로 작동한 후 개발 중에 문제가 발생했습니다.
내가 뭘 잘못하고 있고 어떻게 해결할 수 있나요?
참고: Firefox에서 웹사이트를 열면 모든 것이 잘 작동합니다. 또한 Chrome에서 개발자 도구를 열고(F12 확인) "기기 도구 모음 전환"을 true(Ctrl + Shift + M)로 설정하면 크기가 올바르게 설정됩니다. 이 문제는 "일반 Chrome"을 사용할 때만 발생합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
요소가 더 크게 나타나고 장치의 너비를 기준으로 디자인하고 싶다면
vw(viewWidth) 来设置元素的大小。使用vh를 사용하여 장치의 높이를 기준으로 크기를 설정하세요. 글꼴 크기, div 요소의 높이/너비 등을 설정할 수 있습니다. 휴대폰 사용 시 글꼴이나 너비가 너무 작아지지 않도록 미디어 쿼리에 이 기능을 사용하세요.