모질라의 viewport 메타 태그 섹션을 읽어봅니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Viewport meta tag - HTML: HyperText Markup Language | MDN
This article describes how to use the "viewport" <meta> tag to control the viewport's size and shape.
developer.mozilla.org
최근 사내 모바일 앱을 개편하면서, 이곳저곳에서 날라오는 여러 무질서한 html을 표준화하는 스크립트를 작성할 일이 있었습니다.
viewport meta 태그 설정들이 모바일 앱 레이아웃에서 상당히 중요한 역할을 한다는 것을 알게 되었습니다.
또 해당 설정이 존재하지 않는 경우 css와 크기 측정 api들이 생각했던 대로 동작하지 않는 것을 확인할 수 있었습니다.
배경
"viewport" <meta> 태그를 이용하면 뷰포트의 크기와 모양을 제어할 수 있습니다.
뷰포트는 현재 보고 있는 컴퓨터 그래픽의 다각형(일반적으로 직사각형) 영역을 나타냅니다.
웹 브라우저 용어로, 현재 보고 있는 문서의 창(또는 문서가 전체 화면 모드에서 보고 있는 경우 화면)에 표시되는 부분을 나타냅니다.
뷰포트 외부의 콘텐츠는 뷰 안으로 스크롤할 때까지 화면에 표시되지 않습니다.
현재 보이는 뷰포트 부분을 시각적 뷰포트(viewport)라고 합니다.
사용자가 핀치 줌한 경우와 같이 레이아웃 뷰포트(Layout viewport)보다 작을 수 있습니다.
이 경우 레이아웃 뷰포트는 그대로 유지되지만 시각적 뷰포트는 더 작아집니다.
그러나 이 메커니즘은 미디어 쿼리를 사용하여 좁은 화면에 최적화된 페이지에는 그다지 좋지 않습니다.
예를 들어 가상 뷰포트가 980px인 경우 640px 또는 480px 이하에서 시작되는 미디어 쿼리는 사용되지 않아 이러한 효과가 제한됩니다. 반응형 디자인 기법. 뷰포트 메타 태그는 좁은 화면 장치에서 가상 뷰포트의 이러한 문제를 완화합니다.
Visual Viewport vs Layout Viewport
뷰포트는 비주얼 뷰포트와 레이아웃 뷰포트가 있습니다.
비주얼 뷰포트는 줌 인, 줌 아웃하면 크기가 변경됩니다. (visualViewport.width, visualViewport.height, 스크롤바 미포함 너비)
레이아웃 뷰포트는 브라우저 창 크기로 생각하시면 됩니다. (window.innerWidth, window.innerHeight, 스크롤바 포함 너비)
viewport basic
<meta name="viewport" content="width=device-width, initial-scale=1">width
- device-width
- 화면의 해상도가 1440 x 900이라고 가정해 보겠습니다. 즉, 화면의 너비는 1440픽셀이므로 장치 너비는 1440픽셀입니다.
- 따라서 device-width는 1440px이 됩니다.
minimum-scale
maximum-scale
user-scalable
경고: user-scalable=no를 사용하면 저시력 혹은 시각 장애가 있는 사용자에게 접근성 문제가 발생할 수 있습니다.
WCAG는 최소 2배 줌 허용을 요구합니다. 그러나 5배 줌을 활성화하는 것이 좋은 관행입니다.
스크린 밀도
뷰포트 너비와 스크린 너비
초기 크기 또는 최대 크기를 설정하는 페이지의 경우
width 속성이 실제로 최소 표시 영역 너비로 변환됨을 의미합니다. (고정이 아니라 최소임)
예를 들어 레이아웃에 최소 500픽셀의 너비가 필요한 경우 다음 마크업을 사용할 수 있습니다.
화면 너비가 500픽셀 이상인 경우 브라우저는 화면에 맞게 뷰포트를 확대합니다(줌 하는 대신).
<meta name="viewport" content="width=500, initial-scale=1">사용 가능한 다른 속성은 minimum-scale, maximum-scale 및 user-scalable입니다.
이러한 속성은 확대/축소 수준의 변경을 제한할 뿐만 아니라 초기 크기 및 너비에 영향을 줍니다.
모바일 및 태블릿 장치의 일반적인 표시 영역 크기
참고
https://bokand.github.io/viewport/index.html
https://bokand.github.io/viewport/index.html
Use mouse to pan around (as if using a touch-screen). Hold shift to pinch-zoom in/out. Chrome The layout viewport is unchanged under pinch-zoom - the position: fixed bar does not follow the visual viewport when zoomed in. Edge Essentially the same model as
bokand.github.io