모바일에서 블로그를 살펴보던 중에 화면을 확대하면 커지는 것을 발견했습니다.
pinch 와 spread
초기 상태에서 두 손가락으로 화면을 벌리면 (spread) 화면이 확대되고, 두 손가락을 오므리면 (pinch) 화면이 축소됩니다.
🔺 화면 가로폭에 맞게 보이는 기본상태
🔺 두 손가락을 펼쳐서 화면을 확대한 상태
모바일에서 이미지로 되어있는 도표나 작은 글씨, 숫자들이 알아보기 힘들땐 이렇게 줌인/줌아웃 기능이 도움이 될텐데요.
한편으로는 스마트폰 조작하다가 의도치 않게 화면이 커지고 흔들리면 불편하기도 하더라고요. 그래서 고민하다가 화면크기가 변하지 않도록 설정을 해보았습니다. 매우 간단합니다.
VIEWPORT 란?
모바일에서 화면 확대/축소 설정은 viewport를 이용하여 할 수 있습니다.
viewport란 모바일 웹브라우저에서 내용을 보여주는 표시영역, 즉 가상의 window와 같은 개념입니다. 애플에서 safari에 최초 도입하였고 지금은 대부분의 모바일 웹브라우저에서도 채택하고 있습니다. (웹표준은 아닙니다.)
이게 왜 필요하냐면 데스크톱과 모바일에서 화면을 출력하는 방식의 차이에 기인합니다.
1) 데스크톱에서는 브라우저의 창크기가 곧 출력영역이 됩니다. (visible area = viewport) 브라우저를 전체화면으로 하거나, 창의 크기를 조절하면 스크롤바가 생기면서 출력 영역도 줄어듭니다.
2) 반면에 모바일에서는 브라우저의 크기는 스마트폰 디스플레이에 의해 정해져 있죠. 여기에 데스크톱에서와 동일한 내용을 우겨 넣으면 글씨도 작아지고 가독성이 떨어집니다.
브라우저 창의 크기는 고정이니까 안에 내용의 크기를 조절해서 보기 편하도록 viewport라는 추가적인 개념이 도입된 것입니다.
화면 확대축소 설정방법
티스토리 스킨 수정메뉴로 가셔서 skin.html 편집화면으로 들어갑니다.
이 viewport는 meta tag를 통해서 설정해 주는데요. <head> 위쪽에 위치하게 넣어줍니다. 다른 mera tag들도 최상단에 들어가 있을 거에요.
삽입할 문구는 아래와 같습니다. (코드 텍스트 드래그하시면 복사 가능합니다)
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
이렇게 넣어주시면 화면 가로폭이 스마트폰 디스플레이의 영역에 맞게 초기값이 세팅되고, 스프레드 핑거 터치를 허용하면 기본의 5배율까지 확대가 가능해집니다.
viewport 속성값
width=device-width
height=device-height
가로와 세로폭을 정의합니다.
숫자로 몇 픽셀을 구체적으로 설정할 수도 있고
device-width device-height 라고 속성값을 지정하면 css 설정에서 정해놓은 100%값으로 나타냅니다.
initial-scale=1.0
조작하지 않았을 때 초기에 보여지는 화면크기입니다. 속성값 1로 하면 css와 기기간에 1:1 관계로 출력합니다.
minimum-scale=1.0
화면을 핀치로 축소할 때 줄어들 수 있는 줌아웃 배율의 하한선입니다. 기본값은 0.25입니다.
maximum-scale=5.0
화면을 스프레드로 확대할 때 늘어날 수 있는 줌인 배율의 상한선입니다. 기본값은 1.6입니다.
user-scalable=yes
사용자가 스마트폰 핑거터치로 화면 확대축소를 할 수 있게 설정합니다. no로 바꿔주면 터치를 통해 화면 확대축소가 불가능해지고 화면 크기가 고정됩니다.
viewport-fit=cover
아이폰에서 노치 부분에 화면이 안나오는 현상과 같이, 기기에 따라 자동으로 패딩값이 적용되어 화면 한쪽에 여백이 생기는 경우가 있습니다.
기본값이 auto인데 이것을 cover로 해주면 전체 화면으로 내용이 보여지게 됩니다.
이렇게 모바일에서 티스토리 블로그 화면을 확대 축소하는 기능 viewport에 대해 알아보았습니다. 방문자의 편의성을 고려하셔서 원하시는 설정 하시는데 도움 되셨길 바랍니다.
