카테고리 없음

[모질라 읽기] Viewport 메타 태그

DevInvestor 2022. 9. 3. 03:37
반응형

모질라의 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)보다 작을 수 있습니다.
이 경우 레이아웃 뷰포트는 그대로 유지되지만 시각적 뷰포트는 더 작아집니다.

 

브라우저의 뷰포트의 크기는 렌더링된 페이지와 크기가 같지 않은 경우가 많습니다.
일부 모바일 장치 및 스크린 리더는
일반적으로 화면(screen)보다 넓은 가상 창 또는 뷰포트에서 페이지를 렌더링한 다음
렌더링된 결과를 축소하여 한 번에 모두 볼 수 있게 합니다.
이후 사용자는 페이지의 다른 영역을 보기 위해 이동 및 확대/축소할 수 있습니다.
예를 들어 모바일 화면의 너비가 640px인 경우 페이지는 가상 뷰포트 980px로 렌더링된 다음 640px 공간에 맞게 축소됩니다.
이것은 모든 페이지가 모바일에 최적화되어 있는 것은 아니며
작은 표시 영역 너비로 렌더링될 때 깨지거나 보기 좋지 않을 수 있기 때문에 수행됩니다.
이 가상 뷰포트는 모바일에 최적화되지 않은 사이트를 좁은 화면 장치에서 일반적으로 더 잘 보이게 하는 방법입니다.

그러나 이 메커니즘은 미디어 쿼리를 사용하여 좁은 화면에 최적화된 페이지에는 그다지 좋지 않습니다.

예를 들어 가상 뷰포트가 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">
모든 장치의 너비가 같은 것은 아닙니다. 페이지가 다양한 화면 크기와 방향에서 제대로 작동하는지 확인해야 합니다.
"viewport" <meta> 태그의 기본 속성은 다음과 같습니다.

width

뷰포트의 크기를 제어합니다.
width=600과 같은 특정 픽셀 값, 100vw 또는 혹은 device-width(뷰포트 너비의 100%, 즉 100vw)로 설정할 수 있습니다.
최소값은 1이며, 최대값은 10000 입니다.
음수는 무시합니다.
  • device-width
    • 화면의 해상도가 1440 x 900이라고 가정해 보겠습니다. 즉, 화면의 너비는 1440픽셀이므로 장치 너비는 1440픽셀입니다.
    • 따라서 device-width는 1440px이 됩니다.
뷰포트의 크기를 제어합니다.
height=400과 같은 특정 픽셀 수 또는 100vh, device-height(뷰포트 높이의 100%, 즉 100vh)로 설정할 수 있습니다.
최소값: 1. 최대값: 10000. 음수 값은 무시합니다.

minimum-scale

페이지에서 zoom 축소가 허용되는 정도를 제어합니다. 최소값: 0.1. 최대: 10. 기본값: 0.1. 음수 값: 무시됩니다.

maximum-scale

페이지에서 허용되는 zoom 확대 정도를 제어합니다. 3보다 작은 값은 접근성을 고려해 권장하지 않습니다. 최소값: 0.1. 최대: 10. 기본값: 10. 음수 값: 무시됩니다.

user-scalable

페이지에서 zoom 확대 및 축소 작업이 허용되는지 여부를 제어합니다.
유효한 값: 0, 1, yes 또는 no.
기본값: 1이며 yes와 동일합니다.
값을 0으로 설정하면 no와 동일하게 WCAG(웹 콘텐츠 접근성 지침)에 위배됩니다.
경고: user-scalable=no를 사용하면 저시력 혹은 시각 장애가 있는 사용자에게 접근성 문제가 발생할 수 있습니다.
WCAG는 최소 2배 줌 허용을 요구합니다. 그러나 5배 줌을 활성화하는 것이 좋은 관행입니다.

스크린 밀도

화면 해상도는 사람의 눈으로 개별 픽셀을 구분할 수 없을 정도로 높아졌습니다.
예를 들어 스마트폰에는 1920~1080픽셀(~400dpi) 이상의 해상도를 가진 작은 화면이 있는 경우가 많습니다.
이 때문에 많은 브라우저는 각 CSS "픽셀"을 여러 하드웨어 픽셀로 변환할 때 더 작은 물리적 크기로 페이지를 표시할 수 있습니다.
(같은 밀도에 더 많은 픽셀이 들어가기 때문)
처음에는 많은 터치에 최적화된 웹 사이트에서 사용성과 가독성 문제가 발생했습니다.
높은 dpi 화면에서 initial-scale=1인 페이지는 브라우저에서 효과적으로 확대/축소됩니다.
텍스트는 부드럽고 선명하겠지만,
비트맵 이미지는 전체 화면 해상도를 활용하지 못할 수도 있습니다. 
이러한 화면에서 더 선명한 이미지를 얻기 위해
웹 개발자는 최종 크기보다 더 큰 규모로 이미지 또는 전체 레이아웃을 디자인한 다음
CSS 또는 뷰포트 속성을 사용하여 축소할 수 있습니다.
(주 : 클 때 잘보이면 작아져도 잘보일 것이라는 말인듯)
디폴트 픽셀 비율은 디스플레이 밀도에 따라 다릅니다.
밀도가 200dpi 미만인 디스플레이에서 비율은 1.0입니다.
밀도가 200~300dpi인 디스플레이에서 비율은 1.5입니다.
밀도가 300dpi 이상인 디스플레이의 경우 비율은 정수 floor(density/150dpi)입니다.
디폴트 비율은 뷰포트 스케일가 1일 때만 true입니다.
그렇지 않으면 CSS 픽셀과 장치 픽셀 간의 관계가 현재 확대/축소 수준에 따라 달라집니다.
(initial-scale=1을 사용합시다.)

뷰포트 너비와 스크린 너비

사이트는 표시 영역(viewport)을 특정 크기로 설정할 수 있습니다.
예를 들어 "width=320, initial-scale=1" 정의를 사용하여 세로 모드에서 작은 휴대폰 디스플레이에 정확하게 맞출 수 있습니다.
이로 인해 브라우저가 페이지를 더 큰 크기로 렌더링하지 않을 때 문제가 발생할 수 있습니다.
이 문제를 해결하기 위해 브라우저는 요청된 배율로 화면을 채우는 데 필요한 경우 뷰포트 너비를 확장합니다.
이것은 대형 화면 장치에서 특히 유용합니다.

초기 크기 또는 최대 크기를 설정하는 페이지의 경우

width 속성이 실제로 최소 표시 영역 너비로 변환됨을 의미합니다. (고정이 아니라 최소임)

예를 들어 레이아웃에 최소 500픽셀의 너비가 필요한 경우 다음 마크업을 사용할 수 있습니다.

화면 너비가 500픽셀 이상인 경우 브라우저는 화면에 맞게 뷰포트를 확대합니다(줌 하는 대신).

<meta name="viewport" content="width=500, initial-scale=1">

사용 가능한 다른 속성은 minimum-scale, maximum-scale 및 user-scalable입니다.
이러한 속성은 확대/축소 수준의 변경을 제한할 뿐만 아니라 초기 크기 및 너비에 영향을 줍니다.

모바일 및 태블릿 장치의 일반적인 표시 영역 크기

어떤 모바일 및 태블릿 장치에 어떤 viewport 너비가 있는지 알고 싶다면
여기에 모바일 및 태블릿 표시 영역 크기의 포괄적인 목록이 있습니다. (mobile and tablet viewport sizes here)
세로 및 가로 방향의 뷰포트 너비와 물리적 화면 크기, 운영 체제 및 장치의 픽셀 밀도와 같은 정보를 제공합니다.

참고

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

 

반응형