| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars5 | |
| extra_vars6 |
화면의 크기나 기기의 방향의 조건을 체크하여 사용하는 것이 뷰포트(viewport)
데스크탑에서의 1픽셀과 스마트폰의 1픽셀은 실제 크기가 다르기 때문에 데스크탑 화면에서 사용하는 너비값을 스마트폰에도 그대로 적용할 수 없다
그래서 스마트폰 화면을 웹 문서 너비에 맞추는 것이 아니라 문서의 콘텐츠를 스마트폰 화면의 너비에 맞춰 표시할때 사용하는 것이 meta 태그이다
뷰포트를 설정하게되면 웹브라우저의 페이지 자동크기조정기능을 중단시킨다
| width | 화면의 넓이를 의미하며 150, 200과 같은 값을 지정할 수 있습니다. 다만 값을 device-width로 하면 모바일 장치의 화면 넓이를 따라가게 됩니다. |
| height | 화면의 높이를 의미하며 150, 200과 같은 값을 지정할 수 있습니다. 다만 값을 device-height로 하면 모바일 장치의 화면 높이를 따라가게 됩니다. |
| initial-scale | 화면의 초기 확대비율을 지정합니다. |
| user-scaleble | 사용자가 화면을 확대할 수 있는지 여부를 지정합니다. |
| minimum-scale | 화면을 축소할때 최소축소치입니다. |
| maximum-scale | 화면을 확대할때 최대확대치입니다. |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maxium-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
- content="크기지정" 예::content=width=device-width : 컨텐츠를 디바이스 가로 사이즈에 맞춰 표현한다고 선언
- width=device-width : 현재 기기의 px 크기에 맞추도록 브라우저에게 알려주고 웹 문서를 불러와 보여준다
- initial-scale=1.0 : 문서를 불러와 화면에 표시할때 화면 너비에 맞추도록 기본 배율을 1로 지정한다
내용의 확대/ 축소의 기본값을 지정 . 0.0~ 10.0사이값 입력할수있다
initial-scale=1.0 이 부분은 initial-scale(처음스케일)=1.0, 즉 처음로드될때는 초기에 (콘텐츠의 원래 크기값인 1.0)의 값으로 로드한다
initial-scale=1.0 : 초기 표시 배율 (1.0이 기본, 꽉찬 페이지)
- user-scalable=no : 사용자가 임의로 화면을 확대/축소 할 수 없다
- maximum-scale : 내용을 확대할수있는 최대값 지정 . 0.0~ 10.0사이값 입력 할 수 있다
maximum-scale=1.0 : 최대 확대 비율 ( 기본값 5.0 범위 0~10.0)
- minimum-scale : 내용을 확대할수있는 최소값 지정.0.0~ 10.0사이값 입력 할 수 있다
minimum-scale=0.25 : 최소 확대 비율 ( 기본값 5.0 범위 0~10.0)
- target-densitydpi=device-dpi : 안드로이드 레이아웃 크기를 해결하기 위한 속성이다
아이폰은 하드웨어 소프트웨어를 직접 제작하기에 브라우져 해상도의 크기가 달라지는 일이 없다
하지만 안드로이드 같은 경우에는 하드웨어 제작사들이 달라서 같은 5인치라도 idpi, mdpi, hdpi 등에 따라 해상도가 다르다
그래서 target-densitydpi=device-dpi 로 지정하면 위 문제가 해결된다
