[JQuery] JQuery viewport에 대한 정리

적게 작성하고 많은 것을 하자

이번 글에서는 자꾸 콘솔 로그 창에 The key "target-densitydpi" is not supported. 이 에러가 떠서 viewport에 대해 글을 정리한다. 

---

콘솔창을 확인하다가 에러가 아닌 그저 경고의 의미로 아래와 같이 "The key "target-densitydpi" is not supported."라는 문구가 출력됐다.

 

이게 뭐지하다가 구글링을 하다 보니, 이게 크롬에서는 지원을 하지 않고 안드로이드에서 지원을 하고 있어서 나타나는 문제라고 한다.

 

그래서, 소스에서 메타 네임이 viewport라는 것이 있는데 얼핏 알기만 하고 제대로 알고 있지 않아 정리한다.

 

1. viewport

viewport를 가장 쉽게 설명할 수 있는 것은 아래와 같다.

우리가 컴퓨터를 켜고 모니터를 켜서 인터넷 크롬을 실행하면 아래와 같이 나온다. 그럼, 우리는 크롬 브라우저 내에서 네이버나 다음 등을 키게 되는데, 네이버 화면을 볼 수 있는 화면이 viewport다. 아래의 예시를 보자.

 

좌) 브라우저 영역, 우) viewport 영역

 

위와 같이, 크롬 브라우저에 대한 영역이 브라우저 영역이고, 오른쪽 사진에서 브라우저에서 네이버 사이트를 볼 수 있는 영역이 viewport영역이다.

 

이 viewport영역은 항상 고정적인 것은 아니다. viewport영역을 줄일 수도 있다는 소리다. 이것도 하나의 예시로 볼 수 있다. 우리가 카카오톡을 하면서 대화창에 글을 입력할 경우 대화창에 입력창을 터치를 한다.

그러면, 대화창 화면이 위로 올라가고 아래에는 키보드가 나온다. 그러면, 여기서 대화창 화면이 viewport 영역이 된다. 즉, viewport는 고정적인게 아닌 언제나 가변적이 될 수 있다.

 

<meta name="viewport" content="user-scalable=no, 
                      initial-scale=1.0, 
                      maximum-scale=1.0, 
                      minimum-scale=1.0, 
                      width=device-width, 
                      target-densitydpi=medium-dpi"/>

 

viewport라는 메타네임을 위와 같이 정의했다. 여기서 들어가는 값들에 대한 정리다.

user-scalable	사용자 확대/축소 기능 설정 default : yes
initial-scale	줌 레벨 설정
maximum-scale	viewport 최대 배율 값 default : 1.6
minimum-scale	viewport 최소 배율 값 default : 0.25
width	viewport 가로 설정
height	viewport 세로 설정
target-densitydpi	안드로이드에만 적용 이 value에는 medium-dpi나 device-dpi 등이 들어가는데, 이 기능을 넣을 경우 안드로이드에서 크거나 작게 보일 수 있음

---