핀치 줌(pinch zoom)은 모바일 장치에서 손가락 두 개를 이용해 화면을 확대하거나 축소하는 제스처입니다. 이 제스처를 통해 사용자는 사진이나 웹 페이지의 특정 부분을 더 자세히 볼 수 있습니다.
지금까지는 모바일 웹 페이지를 고려하면서 강의를 하지 않았기 때문에 <meta> 태그를 이용하지 않았습니다.
모바일 웹 페이지에서 핀치 줌 기능을 제어하려면 HTML의 <meta> 태그와 CSS, JavaScript를 활용하여 사용자 경험을 조절할 수 있습니다.
<meta> 태그 설정<meta name="viewport"> 태그는 뷰포트의 설정을 정의하여 페이지의 확대/축소와 스크롤을 제어하는 데 사용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width=device-width: 뷰포트의 너비를 장치의 화면 너비에 맞춥니다.initial-scale=1.0: 페이지가 로드될 때의 초기 확대 비율을 1로 설정합니다. 즉, 페이지가 기본 크기로 표시됩니다.user-scalable=no: 사용자가 페이지를 확대하거나 축소할 수 없도록 설정합니다. 핀치 줌 기능을 비활성화합니다.JavaScript를 사용하여 동적으로 뷰포트의 설정을 변경할 수 있습니다. 예를 들어, 특정 동작(클릭 등)에 따라 핀치 줌 기능을 조정할 수 있습니다.
const JS_사진원본보기기능 = () => {
document.body.style = "background-color: black;"
document.getElementById("HTML_이미지").style = "width: 100%"
document.getElementsByName("viewport")[0].content = `
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=3.0,
user-scalable=yes,
}
document.getElementsByName("viewport")[0].content는 meta 태그의 content 속성을 수정하여 뷰포트의 설정을 변경합니다.minimum-scale=1.0: 페이지를 축소할 수 있는 최소 비율을 1로 설정합니다.maximum-scale=3.0: 페이지를 확대할 수 있는 최대 비율을 3으로 설정합니다.user-scalable=yes: 사용자가 페이지를 확대하거나 축소할 수 있도록 설정합니다.