새소식
반응형
WEB/HTML
크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0"
- -
반응형
2024-01-12
1. 방법
위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</body>
</html><meta name="viewport" content="width=device-width, initial-scale=1.0"> 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다.
- width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다.
- initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</body>
</html>메인 이미지 출처 : 사진: Unsplash의Kristaps Ungurs
반응형
'WEB > HTML' 카테고리의 다른 글
| HTML input 태그 커스텀 디자인 해보기 NO JavaScript!!! (0) | 2024.03.04 |
|---|---|
| html 스크롤 시 Fixed 영역 만들기 + resize 이벤트 대응 방법 (0) | 2024.01.15 |
| [HTML] img 태그 리소스 404 및 불러올 수 없을때 처리방법 (0) | 2023.09.08 |
| [HTML] HTML Text Formatting 태그들 알아보기 (0) | 2021.04.18 |
| [HTML] HTML <link> 태그를 통한 리소스 불러오기 (0) | 2021.03.25 |
Contents
소중한 공감 감사합니다