Mobile Safari에서 뷰포트 확대 / 축소를 어떻게 비활성화합니까? = X ‘값이 작동 하지 않는

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

<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.