| document | |||
| root element <html> |
|||
| element <head> |
element <body> |
||
| element <title> |
attribute "href" |
element <a> |
element <h1> |
| text "my title" |
text "my link" |
text "my header" |
|
The <head> element is a container for meta-data(a set of data that describes and gives information about other data) and is placed between the <html> tag and the <body> tag.
HTML 문서 <head> 요소의 viewport <meta> 설명 ①
minimum-scale=1.0
maximum-scale=1.0
접속자가 컨텐트를 뷰포트 기준 100%(1.0)까지 확대 및 축소할 수 있게 설정하였습니다. minimum-scale과 maximum-scale은 모바일 환경의 핀치 줌 기능을 제어하는 데 사용합니다. 지나치게 확대하거나 축소하지 못하게 한정하는 것입니다. viewport의 선택 조건들입니다.
Minimum-scale is designed to prevent the user from zooming too far out on a page,
Maximum-cale is an optional attribute for the viewport, and it defines the maximum zoom that website users are able to do.
㉮ 데스크톱 웹 브라우저는 viewport <meta> 설정을 무시합니다.
㉯ 대부분의 최신 모바일 웹 브라우저도 viewport <meta> 설정을 기본 값으로 무시하거나 줌 기능 옵션을 사용합니다.
㉰ 줌 기능의 제한이 모바일 사용자 환경에 좋지 않다는 판단으로, Apple은 iOS 버전 10부터 user-scalable, minimum-scale, maximum-scale의 지정을 무시하기로 결정하였습니다.
- 네이버 모바일 접속 m.naver.com의 viewport 설정
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
- 네이버 PC 접속 www.naver.com의 viewport 설정
<meta name="viewport" content="width=1190">
- Apple www.apple.com의 viewport 설정
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- 다음 www.daum.net의 viewport 설정
(접속 기기를 인식하여 5가지 정도의 viewport <meta> 설정이 있으며 그 중 1개만 기록합니다.)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 안정적인 viewport <meta> 설정 기본 값
<meta name="viewport" content="width=device-width, initial-scale=1.0">
댓글