모바일 웹) js로 zoom 조절하기

모바일 웹에서 Viewport meta 태그를 이용하여 줌을 제어할 수 있다. [ Viewport meta 태그 정보 : MDN ]

여기서 initial-scale 속성값을 변화시켜 줌을 새로 초기화하게 만들어 줌을 제어할 수 있다.

 

먼저 html에 Viewport meta 태그를 넣어준다.

참고) initial-scale 속성값의 최소값은 0.1이고, 최대값은 10 이다.

<meta name="viewport" content="width=device-width, initial-scale=초기값" >

ex)
<meta name="viewport" content="width=device-width, initial-scale=0.3" >

 

이제 zoom을 조절하는 함수를 만들어보자.

function zoomControlMobile(scale) {
  const viewport = document.querySelector('meta[name="viewport"]');
  
  if (viewport) {
    viewport.content = 'width=device-width';
    viewport.content = `width=device-width, initial-scale=${scale}`;
  }
}

 

~끝~

 

참고로 여기서 

    viewport.content = 'width=device-width';
    viewport.content = `width=device-width, initial-scale=${scale}`;

이 부분에 의문을 느낄 수 있겠지만, 처음 설명을 다시 본다면 이해할 수 있다.

initial-scale 속성값을 변화시켜 줌을 새로 초기화하게 만들어 줌을 제어할 수 있다.

initial-scale 속성값을 변화시켜줘야 줌을 제어할 수 있기 때문에 content에 값을 2번 할당한 것이다.

 

function zoomControlMobile(scale) {
  const viewport = document.querySelector('meta[name="viewport"]');
  
  if (viewport) {
    viewport.content = `width=device-width, initial-scale=${scale}`;
  }
}

 

만일 이와 같이 할 경우, initial-scale 속성값이 이전과 동일할 경우 확대/축소 동작을 일어나지 않는다.