[HTML] viewport
2020. 2. 3. 11:00ㆍSTUDY/HTML CSS
웹앱 개발할 때, 글씨 크기가 웹에선 적당했지만, 모바일에선 너무 작았던 문제를 해결합니다.
화면 크기에 따라 자동적으로 화면이 최적화되게 지원합니다.
웹앱/반응형 개발하다가 알게된 meta 태그 'viewport' 입니다.
간단한 HTML 파일을 만든다.
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>APP</title>
</head>
<body>
<div id="app">
<div class="header">Header</div>
<div class="body">Body</div>
</div>
</body>
</html>| 웹 화면
viewport 유무에 따른 차이가 없습니다.
| 모바일
여기서 meta 태그 viewport 가 있고 없고의 차이는 하단 이미지를 참고합니다.
- 크롬 iphone6/7/8 (375*667)로 확인한 결과입니다.
| 모바일로 최적화
<meta name="viewport" content="width=device-width, user-scalable=no">
'STUDY > HTML CSS' 카테고리의 다른 글
| [SASS/SCSS] 부모선택자 참조 (&) (0) | 2020.03.04 |
|---|---|
| [SASS/SCSS] 네임스페이스 속성 중첩사용 (font, background .. ) (0) | 2020.03.03 |
| [SASS/SCSS] 중첩규칙 (0) | 2020.03.02 |
| [SASS/SCSS] SASS란 무엇인가 / 실습환경 (0) | 2020.02.27 |
| [HTML/CSS] 상단영역 고정하기 #상단고정 #헤더고정 (0) | 2020.02.05 |