Mobile Safari에서 뷰포트 확대 / 축소를 어떻게 비활성화합니까?

나는이 세 가지를 모두 사용해 보았습니다.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

각각 Google 검색 또는 SO 검색에서 권장하는 다른 값이지만 ' user-scalable = X '값이 작동 하지 않는 것 같습니다

또한 세미콜론 대신 값을 구분하는 쉼표를 사용해 보았습니다. 행운은 없습니다. 그런 다음 user-scalable가치 가있는 것만 시도했지만 여전히 운이 없습니다.

최신 정보

Apple 사이트에서 얻었고 작동합니다.

<meta name="viewport" content="width=device-width, user-scalable=no" />

메타 태그를 사용하고있는 웹 사이트에서 메타 태그를 복사했기 때문에 문제는 비표준 따옴표였습니다.

귀하의 코드는 속성 큰 따옴표를 멋진 큰 따옴표로 표시합니다. 실제 인용 부호에 인용 부호가 있으면 이것이 문제라고 생각할 것입니다.

이것은 iOS 4.2의 Mobile Safari에서 작동합니다.

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

iOS 10 솔루션을 찾는 사용자의 경우 iOS 10 용 user-scaleable=noSafari에서 사용할 수 없습니다. 그 이유는 Apple이 사람들이 웹 페이지를 확대 할 수있게하여 접근성을 개선하려고하기 때문입니다.

출시 노트에서 :

Safari에서 웹 사이트에 대한 접근성을 향상시키기 위해 웹 사이트가 뷰포트에서 user-scalable = no로 설정되어 있어도 확대 / 축소가 가능합니다.

내가 아는 한, 운이 나쁘다.

@mattis는 iOS 10 Safari에서 사용자 조정 가능 속성으로 확대 / 축소를 사용하지 않도록 설정할 수 없다는 것이 맞습니다. 그러나 'gesturestart'이벤트에서 preventDefault를 사용하지 않도록 설정했습니다. iOS 10.0.2의 Safari에서만 이것을 확인했습니다.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

iOS 10까지의 아이폰 사파리의 경우 "뷰포트"는 해결책이 아닙니다.

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

iOS 10에서는 더 이상 작동하지 않습니다. Apple이 기능을 제거했습니다.

총 플랫폼 앱을 만들지 않으면 iOS에서 확대 / 축소 웹 사이트를 사용 중지 할 수있는 방법이 없습니다.

헤드 태그에 다음을 추가하십시오.

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

추가적으로

<meta name="HandheldFriendly" content="true">

마지막으로 스타일 속성 또는 CSS 파일로 웹킷 기반 브라우저에 다음 텍스트를 추가하십시오.

html {
    -webkit-text-size-adjust: none
}

다음 코드를 사용하여 iOS 12에서 작동합니다.

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

첫 번째 if 문을 사용하면 iOS 환경에서만 실행되도록합니다 (Android에서 실행하면 스크롤 동작이 중단됩니다). 또한 passive옵션이로 설정되어 있는지 확인하십시오 false.

이것은 iOS 10.3.2에서 잘 작동합니다.

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

감사합니다 @arthur와 @aleclarson

HTML 헤더에 다음을 추가 하여이 동작을 중지했습니다. 마우스 휠을 사용할 때 데스크탑 브라우저가 확대 / 축소를 지원하므로 모바일 장치에서 작동합니다. 데스크탑 브라우저에서는 큰 문제가 아니지만 이것을 고려하는 것이 중요합니다.

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

CSS 스타일 시트에 대한 다음 규칙

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

때로는 content태그의 다른 지시문이 페이지 레이아웃을 설정하는 데있어 Apple의 최선의 추측 / 휴리스틱을 엉망으로 만들 수 있습니다.

<meta name="viewport" content="user-scalable=no" />

Safari 9.0 이상에서는 아래와 같이 뷰포트 메타 태그에 맞춤 축소 를 사용할 수 있습니다

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

나는 어리석게도 너비가 픽셀 단위 인 래퍼 div를 가지고있었습니다. 다른 브라우저는 이것을 다루기에 충분히 지능적인 것처럼 보였습니다. 너비를 백분율 값으로 변환하면 Safari 모바일에서도 잘 작동했습니다. 매우 성가신.

.page{width: 960px;}

에

.page{width:93.75%}

<div id="divPage" class="page">
</div>

CSS touch-action속성을 사용하는 것이 가장 우아한 솔루션입니다. iOS 13.5에서 테스트되었습니다.

핀치 확대 / 축소 동작을 비활성화하고 두 번 탭하여 확대 / 축소하려면 :

body {
  touch-action: pan-x pan-y;
}

앱에 패닝 (예 : 스크롤)이 필요하지 않은 경우 다음을 사용하십시오.

body {
  touch-action: none;
}

WAI WCAG 2.0 AA 접근성 요구 사항을 준수하려면 핀치 줌을 비활성화하지 않아야합니다 . (WCAG 2.0 : SC 1.4.4 텍스트 레벨 AA 크기 조정). 당신은 그것에 대해 자세한 내용은 여기를 읽을 수 있습니다 : 모바일 접근성 : WCAG 2.0과 다른 W3C는 / WAI 가이드 라인은 모바일, 2.2 줌 / 확대 적용하는 방법

이것은 iPhone 등에서 작동해야합니다.

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">