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