[HTML] Viewport

1. meta 태그

HTML 문서의 meta 태그는 문서의 정보(metadata)를 제공한다.

해당 metadata는 검색엔진이나 브라우저에서 사용한다.

HTML 문서의 head 태그안에 작성된다.

<meta name="metadata-name" content="metadata-value">

 

2. 뷰포트(Viewport)

뷰포트란 웹 문서의 내용이 화면에 보이는 영역을 말하면, 단위는 웹문서 기준 픽셀이다.

 

1) 데스크탑 브라우저

뷰포트 크기는 브라우저에서 웹문서가 보여지는 영역의 크기와 같다. (보이는 영역 == 뷰포트)

문서를 확대하면, 디바이스(데스크탑) 기준 뷰포트의 크기가 고정이므로 웹문서 기준 뷰포트의 크기는 작아진다.

meta 태그로 뷰포트를 설정할 수 없다.(해당 태그 무시)

 

2) 모바일 브라우저

확대/축소 메커니즘이 데스크탑 브라우저와 달라서 뷰포트와 화면에 보이는 영역의 크기가 다르다. (보이는 영역 != 뷰포트)

문서를 확대하거나 축소해도 웹문서 기준 뷰포트의 크기는 변하지 않는다.

meta 태그로 뷰포트를 설정할 수 있다.

 

 

뷰포트 정보가 없으면, 모바일 브라우저 뷰포트 너비를 기본값인 980px을 맞춘다.

<meta name="viewport" content="width=320">

모바일 브라우저의 뷰포트 너비를 320px에 맞춘다.

<meta name="viewport" content="width=device-width">

모바일 브라우저의 뷰포트 너비를 디바이스 해상도에 맞춘다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

설정된 뷰포트를 기준으로 초기화면의 확대/축소 배율(웹문서와 디바이스 해상도가 같을때가 1)을 설정할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

초기 확대/축소 배율에서 사용자가 배율을 조절하지 못하도록 막을 수 있다.

 

3. 관련 BOM 객체

1) document.documentElement.clientWidth, document.documentElement.clientHeight (DOM)

데스크탑 브라우저

웹문서가 보여지는 영역에서 스크롤바 부분을 제외한 영역의 크기를 출력하며, 웹문서를 확대/축소하면 변한다.

 

모바일 브라우저

meta 태그의 뷰포트 설정값을 출력하며, 웹문서를 확대/축소해도 변하지 않는다.

주소창이 사라져도 해당값은 변하지 않으나, meta 태그에 뷰포트의 크기 설정값이 없으면 가상 키보드에 따라 해당값은 변한다.

* jQuery의 $(window).width()와 $(window).height()는 각각 해당값을 출력한다.

 

2) window.innerWidth, window.innerHeight (BOM)

데스크탑 브라우저

웹문서가 보여지는 영역에서 스크롤바 부분을 포함한 영역의 크기를 출력하며, 웹문서를 확대/축소하면 변한다.

 

모바일 브라우저

문서의 내용이 화면에 보이는 영역의 크기(웹문서 기준 픽셀)를 출력하며, 웹문서를 확대/축소해도 변하지 않는다.

주소창이 사라지면 그만큼 커지며, 가상 키보드에 따라서도 해당값은 변한다.

 

3) window.outerWidth, window.outerHeight (BOM)

데스크탑 브라우저

브라우저 창의 전체 크기를 출력하며, 웹문서를 확대/축소해도 변하지 않는다.

 

모바일 브라우저

문서의 내용이 화면에 보이는 영역의 크기(디바이스 기준 픽셀)를 출력하며, 웹문서를 확대/축소해도 변하지 않는다.

주소창이 사라지면 그만큼 더 커지며, 가상 키보드에 따라 해당값은 변한다.

 

 

https://ryanve.com/lab/dimensions/

http://matanich.com/test/viewport-width/

https://whatismyviewport.com/