1. viewport란?
- 웹브라우저에서 document 영역의 가상의 사각형 영역
- 데스크탑 웹 브라우저는 viewport가 실제 브라우저 사이즈의 변화에 따라 같이 변함
- 모바일 웹브라우저는 기본적으로 뷰포트의 크기가 고정되어 있음. 실제 디바이스 해상도와 '상관없이' 모바일 웹브라우저는 무조건 980으로 생각함. (980 이상은 적용 안됨)
- 그래서 웹 화면이 업청 작게 보이는 문제가 발생할 수 있음
- 이를 해결하기 위해 뷰포트값을 설정해줘야함
- 뷰포트 설정 메타 태그
💡 뷰 포트값 설정!! 웹앱 만들 때 필수
meta name="viewport" content="width=device-width, initial-scale=1.0"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> viewport </title>
<!-- 뷰포트? 웹브라우저에서 document 영역의 가상의 사각형 영역 -->
<!-- 데스크탑 웹 브라우저는 viewport가 실제 브라우저 사이즈의 변화에 따라 같이 변함 -->
<!-- 모바일 웹브라우저는 기본적으로 뷰포트의 크기가 고정되어 있음.
실제 디바이스 해상도와 '상관없이' 모바일 웹브라우저는 무조건 980으로 생각함. -->
<!-- 그래서 웹 화면이 업청 작게 보이는 문제가 발생할 수 있음 -->
<!-- 이를 해결하기 위해 뷰포트값을 설정해줘야함 -->
<!-- 뷰포트 설정 메타 태그 -->
<meta name="viewport" content="width=400, initial-scale=1.0">
<meta name="viewport" content="width=600, initial-scale=1.0">
<!-- 980이상은 그냥 980 -->
<meta name="viewport" content="width=2000, initial-scale=1.0">
<!-- 실제 디바이스의 뷰포트값 보다 작은 값을 주면 그냥 실 디바이스의 뷰포트값이 된다 -->
<meta name="viewport" content="width=200, initial-scale=1.0">
<!-- 디바이스 width값에 따라 변하게하는 메타 값!!! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>View Port Test</h2>
<p>this is viewport test page</p>
<img src="./image/computer.png" alt="컴터" style="width: 200px; border: 1px solid red;">
</body>
</html>
▲ 웹브라우저 뷰포트
▲ 모바일로 확인화서 컨텐츠 사이즈가 작아지는 모습
▲ 뷰포트 400으로 조절 후 바뀌는 화면
보조기억장치