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'값이 작동하지 않는 것 같습니다
또한 세미콜론 대신 값을 구분하는 쉼표를 사용해 보았습니다. 행운은 없습니다. 그런 다음 사용자 확장 가능한 값만 제공하려고 시도했지만 여전히 운이 없습니다.
최신 정보
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=no
Safari에서 비활성화되어 있습니다. 그 이유는 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 10.3.2에서 잘 작동합니다.
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);
감사합니다 @arthur와 @aleclarson
Safari 9.0 이상에서는 아래와 같이 뷰포트 메타 태그에 맞춤 축소 를 사용할 수 있습니다
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
때로는 콘텐츠의 다른 지시문이 페이지 레이아웃을 설정하는 방법에 대한 Apple의 최선의 추측으로 견해를 망칠 수 있습니다.
<meta name="viewport" content="user-scalable=no" />
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;
}
다음 코드를 사용하여 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
.
나는 어리석게도 너비가 픽셀 단위 인 래퍼 div를 가지고있었습니다. 다른 브라우저는 이것을 다루기에 충분히 지능적인 것처럼 보였습니다. 너비를 백분율 값으로 변환하면 Safari 모바일에서도 잘 작동했습니다. 매우 성가신.
.page{width: 960px;}
에
.page{width:93.75%}
<div id="divPage" class="page">
</div>
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">
참고 URL : https://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari
'development' 카테고리의 다른 글
JavaScript : location.href를 새 창 / 탭에서 열 수 있습니까? (0) | 2020.02.29 |
---|---|
무료 모나드는 무엇입니까? (0) | 2020.02.29 |
디렉토리 자체를 포함하지 않고 파일 및 폴더 디렉토리를 어떻게 tar합니까? (0) | 2020.02.29 |
레일스 라우팅 헬퍼 (예 : mymodel_path (model))를 모델에 사용할 수 있습니까? (0) | 2020.02.29 |
버퍼와 같은 Vim의 탭 사용 (0) | 2020.02.29 |