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

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;” />

각각 구글 검색 또는 SO 검색에서 권장되는 값은 다르지만 '사용자 확장 가능=X' 값이 작동하지 않는 것 같습니다.

세미콜론 대신 쉼표로 값을 구분하려고 시도했지만 실패했습니다.그리고 나서 나는 오직 그것만 가지려고 노력했습니다.user-scalable값이 존재하지만 여전히 운이 없습니다.

---

갱신하다

Apple의 사이트에서 가져온 것으로 작동합니다.

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

문제는 비표준 인용문이었습니다. 왜냐하면 제가 그것들을 사용하는 웹사이트에서 메타 태그를 복사했기 때문입니다. 이런.

이후에는 하지 않을 수 . 내용은 다음을 참조하십시오. 참조하십시오.touch-action아래의 기반 솔루션.

코드에서 속성 큰따옴표를 고급 큰따옴표로 표시하고 있습니다.당신의 실제 소스 코드에 화려한 인용문이 있다면 그것이 문제라고 생각합니다.

이것은 iOS 4.2의 모바일 사파리에서 작동합니다.

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

솔루션을 , iOS 10은 다음과 같습니다.user-scaleable=no10.iOS Safari에서 할 수 없습니다.그 이유는 애플이 사람들이 웹 페이지를 확대할 수 있게 함으로써 접근성을 향상시키려고 노력하고 있기 때문입니다.

릴리스 정보에서:

Safari의 웹 사이트에 대한 접근성을 개선하기 위해 이제 웹 사이트가 보기 포트에서 user-patch=no를 설정한 경우에도 사용자가 핀치 투 핀치를 사용할 수 있습니다.

그래서 제가 이해하기로는, 우리는 운이 없습니다.

@mattis는 iOS 10 Safari가 사용자 확장 가능한 속성으로 핀치 투 줌을 비활성화할 수 없도록 허용하지 않습니다.하지만 'gesturestart' 이벤트에서 preventDefault를 사용하지 않도록 설정했습니다.iOS 10.0.2의 Safari에서만 확인했습니다.

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

CSS 하기 »touch-action재산은 가장 우아한 해결책입니다. 및 14iOS 13.5 버전 iOS 14에서 되었습니다.

핀치 줌 제스처를 비활성화하고 두 번 눌러 줌하려면:

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

프로그램을 이동할 필요가 없는 경우(즉, 스크롤) 다음을 사용합니다.

body {
  touch-action: none;
}

아이폰 사파리의 경우 iOS 10 "뷰포트"까지 해결책이 아닙니다, 저는 이런 방식이 싫지만, 저는 이 자바스크립트 코드를 사용했고 저에게 도움이 되었습니다.

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

저는 iOS 12에서 다음 코드로 작동하게 되었습니다.

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

첫 번째 if 문을 사용하면 iOS 환경에서만 실행됩니다(안드로이드에서 실행되면 스크롤 동작이 중단됩니다).한참고에 하십시오.passive을 옵설정으로 false.

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;
}

실제로 Apple은 최신 iOS 버전에서 user-module=no를 비활성화했습니다.저는 가이드라인으로 노력했고 이 방법은 다음과 같습니다.

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

user-scalable=0

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

당신이 gross 플랫폼 앱을 만들지 않는 한 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 10.3.2에서 잘 작동합니다.

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

감사합니다. @parth and @aleclarson

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

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

▁the에 있는 다른 들.content태그는 페이지 레이아웃 방법에 대한 Apple의 최고의 추측을 망칠 수 있습니다. 핀치 줌을 비활성화하기 위해 필요한 모든 것은 다음과 같습니다.

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

언급한 바와 같이 이 솔루션은 2020년 후반부터 기본적으로 작동합니다.

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

하지만 단점은 스크롤하는 동안에도 꼬집을 수 있고 끼일 수 있다는 것입니다.해결책은 스크롤을 비활성화하는 것입니다.

body {
    overflow: hidden;
}

그래도 페이지를 스크롤하려면 어떻게 해야 할까요?당신은 여전히 다른 사람과 그것을 할 수 있습니다.<div>로 설정합니다.overflow:auto:

<body>
    <div id='app'></div>
</div>

그리고 나서.

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

저는 위의 모든 것을 시도했지만 IOS 장치에서 효과가 있었습니다.

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

오늘(2022년 10월) iOS 14.8에서 제가 더블 탭 줌을 완전히 막을 수 있는 유일한 방법은 다음과 같습니다.

document.addEventListener("click", (e) =>
        {
            e.preventDefault();
        })

이마저도:

* {
    touch-action: none !important;
}

(분명히 현실적이지는 않지만, 데모 목적으로만) 모든 경우에 충분하지 않았습니다. 내가 에 대해 click그것을 두 번 누르면 거의 돌이킬 수 없는 확대가 일어날 것이고, 완전히 무시할 것입니다.touch-action설정하지만 내가 전화를 한다면,preventDefault()클릭 핸들러에서는 확대/축소되지 않습니다.그서래, 이을하것에서 을 합니다.document할 것 , 제가 될 것 .click.

저는 이것이 어떤 부작용을 일으킬지는 모르지만, 사람들이 어떤 부작용을 생각한다면 분명히 소리를 지를 것입니다.

WAI WCAG 2.0 AA 접근성 요구사항을 준수하기 위해 핀치 줌을 비활성화해서는 안 됩니다. (WCAG 2.0: SC 1.4.4 텍스트 레벨 AA 크기 조정)자세한 내용은 여기에서 확인할 수 있습니다. 모바일 접근성: WCAG 2.0 및 기타 W3C/WAI 지침을 모바일에 적용하는 방법, 2.2 확대/확대

저는 어리석게도 픽셀 단위의 폭을 가진 래퍼 디브를 가지고 있었습니다.다른 브라우저들은 이것을 다룰 만큼 충분히 지능적인 것처럼 보였습니다.일단 너비를 백분율 값으로 변환하면 Safari 모바일에서도 잘 작동했습니다.정말 짜증나요.

.page{width: 960px;}

로.

.page{width:93.75%}

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

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

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

언급URL : https://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari