meta viewport 자바스크립트 다루기

viewport 이용해서 모바일과 데스크톱에서 어떤 화면과 배율과 확대 조정 등을 설정할 수 있는데요. 페이지 로딩 시에 설정하는 것과 다르게 특정 버튼을 누르면 viewport 적용되도록 하고 싶은 경우에는 자바스크립트 이용해서 조작해야 하는 경우가 있어요.

일단 이미 meta viewport 태그가 있는 경우에는 meta 태그를 찾아서 수정하는 방법을 사용 할 수 있습니다. 제가 주로 사용하는 방법입니다.

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

아니면 아예 meta viewport 관련 내용이 없는 경우에는 추가해야 합니다. 추가 하고 싶은 경우에는 meta 태그를 만들고 나서 설정들을 추가하는 방법으로 사용해야 합니다.

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

이 두개를 이용해서 찾아서 없으면 만드는 방법을 사용해도 좋을 것 같습니다. 가장 많이 사용하는 옵션 설정을 넣었는데요. 각 옵션을 상황에 맞게 변경해서 사용할 수 있습니다.

user-scalable 사용자 단말기의 확대 축소 기능을 사용할지 입니다. no는 확대 불가이고 yes는 가능하게 합니다.

inital-scale 는 초기 확대 비율을 설정합니다. 보통 1을 사용합니다.

minimum-scale 는 최소 몇배로 축수할 수 있는지 설정입니다. 가끔 스마트폰에서 너무 크게 보여서 축소하고 싶은 경우 0.25 정도 설정으로 축소 가능하게 설정할 수 있습니다.

maximum-scale 몇 배까지 확대 가능하게 할 것인지 입니다. 보통 5까지 사용하는 경우가 있습니다.

target-densitydpi=device-dpi 스마트폰 해상도에 맞게 보여 주라는 의미입니다.

content="width=device-width" 콘첸츠 표현할 넓이를 디바이스 크기에 맞게 한다는 의미입니다.