viewport란?
viewport는 화면상의 화상표시 영역을 뜻하고 모바일웹이나 반응형웹에서 각각의 기기장치를 인식할 때 사용하는 중요한 태그입니다.
데스크탑의 뷰포트
웹브라우저 창의 뷰포트와 같고, 웹페이지가 뷰포트보다 작으면 스크롤를 사용해서 볼 수 있습니다.모바일의 뷰포트
웹브라우저 창보다 크거나 작을 수 있고, 상하좌우로 움직이거나 확대축소를 통해 볼 수 있습니다.Viewport 크기 조절이 필요한 이유
데스크탑 기반으로 설계된 웹페이지를 모바일에서 보면 기본 뷰포트가 980px이기 때문에 모바일 화면에 따라 축소되어 렌더링됩니다.
예를 들면 모바일의 화면이 640px인 경우에 콘텐츠의 가로가 980px이 640px에 맞게 축소되어 렌더링됩니다.
그렇게 되면 사용자는 줌인, 줌아웃을 해서 콘텐츠를 보게 되기 때문에 뷰포트의 사이즈와 스케일을 조정하여 작은 사이즈의 브라우저에서도 최적화된 콘텐츠를 보여줍니다.
특히, 데스크 환경이나 모바일 환경에서 가로로 스크롤을 하거나 축소해야 하는 경우, 사용자 경험에 좋지 않습니다.
뷰포트 메타태그 코드는 아래처럼 작성하면 됩니다.
<meta name="viewport" content="name=value, name=value">
컨텐츠에는 쉼표나 공백으로 구별하고, 하기와 같은 내용들이 들어갑니다.
- width
뷰포트의 가로 사이즈를 지정하는데 device-width(장치의 너비)로 하면 기기에 따라 가로 사이즈가 설정됩니다.
- height
width 대응으로 height를 사용하여 특정 높이를 지저할 수 있으나 페이지가 수직으로 스크롤 되지 않도록 하고 싶지 않을 때를 제외하고서는 실제로는 잘 사용하지 않는다고 합니다.
- minimum-scale
최소 화면 배율을 사용자가 축소할 수 있는 정도를 설정하는 것으로 기본값은 0.25이고, 0-10까지 설정할 수 있습니다. 최소사이즈를 1.0으로 처리해서 축소를 못하게 막습니다.
- maximum-scale
최대 화면 배율을 사용자가 확대할 수 있는 정도를 설정하는 것으로 기본값은 5이며, 0-10까지 설정할 수 있습니다. 최대사이즈를 1.0으로 처리해서 확대를 못하게 막습니다.
- Initial-scale
minimum-scale및 maximum-scale속성에 의해 결정되며, 초기화면 배율 (0~10)으로 설정합니다. 1.0(100%)을 뜻하고, 브라우저에서 페이지를 처음 로드 할 때 초기 확대/축소 수준을 설정합니다. 모바일기기의 가로 해상도로 조정합니다. 일부 스마트폰은 화면을 확대해서 출력하기도 해서 확대비율을 변경하지 못하게 하고 싶을 때에도 사용합니다. user-scalable를 no로 설정하지 않는 한 사용자는 축소/확대를 minimum, maximum scale 사이에서 할 수 있습니다. 이 값을 키우면 보여지는 화면이 줌이 되어 크게 보입니다.
- user-scalable
사용자가 뷰포트의 배율을 변경할 수 있는지 여부를 결정합니다. 기본값은 yes이며, no로 설정하면 입력필드에 텍스트를 입력할 때 웹페이지가 스크롤되지 않으며, 디자인이 깨져보이지 않도록 할 수 있습니다. 만약에 initial, minimum, maximum의 값을 동일한 값으로 해놨다면 이 기능을 yes로 해도 축소/확대가 되지 않습니다.
- viewport-fit
auto, cover가 있는데 auto는 자동으로 패딩을 적용하고, cover로 사용할 시 전체화면에 꽉차게 나옵니다.
Cover로 하는 경우에 컨텐츠가 잘려지는 경우가 있습니다.
이때는 safe-area-inset 속성을 이용해서 css를 적용합니다.
축소/확대가 안되면 접근성을 제한하기 때문에 모든사람들이 이용할 수 있어야 하는 웹의 본질에 반대가 됩니다. 따라서 minimum, maximum, user-scalable 속성을 사용하지 않는 것이 좋습니다.
추가로 IOS에서 적용되는 메타태그
- apple-mobile-web-app-capable
전체화면 모드에서 실행되는지 여부를 설정하는 것으로 yes로 설정 시, 전체화면 모드로 실행되는 것입니다.
- apple-mobile-web-app-status-bar-style
상태표시줄을 나타내는 것으로, 기본값은 default입니다. black으로 설정하면 상태표시줄의 배경이 검정색으로 되고, black-translucent로 설정하면 상태표시줄은 반투명한 검정색이 됩니다. black과 default로 설정하면 상태표시줄 아래에 콘텐츠가 나오고, black-translucent로 설정하면 상태표시줄에 의해 콘텐츠가 부분적으로 가려져서 전체화면에 표시됩니다.
이 태그는 전체화면모드를 먼저 지정하지 않으면 아무런 효과가 없습니다.
뷰포트를 상세히 설정할 필요가 없는데 이 이유는 일부 값이 설정되기만 하면 IOS사파리는 다른값을 추론하기때문입니다.
scale을 1.0으로 설정하면 사파리는 뷰포트 너비를 세로화면에서 device-width로 가정하고, 가로화면에서는 device-height를 가정합니다.
따라서 이상적인 뷰포트설정은 아래와 같습니다.
<meta name="viewport" content="width=device-width,initial-scale=1">
additional rules
- 특정 width나 너무 넓은 width를 사용하여 렌더링하지 않습니다.
- CSS 미디어쿼리를 이용하여 작은화면, 큰화면에 따라 디자인을 다르게 적용합니다.
- px, cm, pc 등과 같은 절대값을 사용하지 않고, em, rewm, vw, vh, vmin, vmax, %와 같은 상대적인 값을 사용합니다.
[출처]
https://www.quirksmode.org/mobile/metaviewport
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW8
https://aboooks.tistory.com/352
https://hannut91.github.io/blogs/viewport-fit
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
https://pingfanzhilu.tistory.com/entry/HTML
https://wouterdeschuyter.be/blog/how-to-disable-viewport-scaling-in-ios-10-you-dont
https://www.w3schools.com/css/css_rwd_viewport.asp
https://www.seoptimer.com/blog/viewport/#:~:text=Viewport%20best%20practices,-In%20order%20to&text=Avoid%20rendering%20the%20page%20to,vmin%2C%20vmax%2C%20and%20%25.
