크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0"

2024-01-12 1. 방법 위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다. 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다. width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다. initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다. 메인 이미지 출처 : 사진: ..