더블터치시 자동확대 막는법
오늘은 모바일 브라우저에서 확대/축소 기능을 끄는 방법에 대해서 알아보겠습니다.
1. HTML 메타태그 방식
<meta> 태그에 user-scalable=no 속성을 추가하면, 사용자가 페이지를 확대/축소할 수 없게 됩니다
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
- width=device-width : 화면 너비에 맞춰 페이지를 설정합니다.
- initial-scale=1 : 페이지 로드시 기본 확대 비율을 1로 설정합니다.
- maximum-scale=1 : 최대 확대 비율을 1로 설정하여 확대를 제한합니다.
- user-scalable=no : 사용자가 확대/축소할 수 없게 만듭니다.
2. JS방식
저는 meta 방식이 안먹혀서 js방식을 사용했더니 바로 됐습니다!
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
} lastTouchEnd = now;
}, false);반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| CSS 적용안될때 해결법 (0) | 2024.07.01 |
|---|---|
| CSS | portfolio page만들기 (0) | 2022.11.06 |
| HTML&CSS | transform,벤더프리픽스,transition,animation (1) | 2022.11.01 |
| HTML&CSS | 다단레이아웃,flex,미디어쿼리,em,rem (0) | 2022.10.27 |
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
