모바일 웹에서 핀치 줌 비활성화

모바일 웹에서 핀치 줌 비활성화

---

모바일 장치에서 핀치 및 줌을 비활성화하고 싶습니다.

뷰포트에 어떤 구성을 추가해야합니까?

링크 : http://play.mink7.com/n/dawn/

---

편집 : 계속해서 댓글이 올라 오기 때문에 우리 모두는 이것을하지 말아야한다는 것을 알고 있습니다. 질문이었다 어떻게 내가하지, 그것을해야합니까 해야 내가 그것을 할.

이것을 모바일 장치에 추가하십시오. 그런 다음 너비를 백분율로 표시하면 괜찮습니다.

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

뷰포트를 사용할 수없는 장치에도 다음을 추가하십시오.

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

---

이것이 내가 필요한 전부입니다.

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

---

이것이 나쁜 생각이라고 말한 모든 사람에게 항상 나쁜 생각은 아니라고 말하고 싶습니다. 때로는 모든 콘텐츠를보기 위해 축소해야하는 것이 매우 지루합니다. 예를 들어 iOS에서 입력을 입력하면 화면 중앙에 표시되도록 확대됩니다. 키보드를 닫아도 작동하지 않는 원인이 된 후에 축소해야합니다. 또한 훌륭한 레이아웃과 사용자 경험을 만드는 데 많은 시간을 투자 할 때 줌으로 인해 엉망이되는 것을 원하지 않는다는 데 동의합니다.

그러나 다른 주장은 시력 문제가있는 사람들에게도 가치가 있습니다. 그러나 제 생각에는 눈에 문제가 있다면 이미 시스템의 확대 / 축소 기능을 사용하고 있으므로 콘텐츠를 방해 할 필요가 없습니다.

---

안타깝게도 제공된 솔루션은 Safari 10 이상에서 작동하지 않습니다 user-scalable=no. Apple이 . 이 스레드에는 자세한 내용과 일부 JS 해킹이 있습니다. iOS 10 이상 사파리 뷰포트 확대 / 축소 비활성화?

---

IE에는 고유 한 방식이 있습니다. CSS 속성, -ms-content-zooming. 본문에 없음 또는 무언가로 설정하면 비활성화됩니다.

IE10에서 확대하려면 핀치 비활성화

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

---

이것은 ios safari에서 사용자의 확대 / 축소 동작을 방지하고 "탭으로 확대"기능도 방지합니다.

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

jsfiddle : https://jsfiddle.net/vo0aqj4y/11/

---

찾을 여기 당신이 사용할 수 있습니다 user-scalable=no:

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

---

최소 너비 속성으로 시도하십시오. 설명해 드리겠습니다. 예를 들어 화면 너비가 400px 인 기기를 가정 해 보겠습니다. 확대하면 글꼴이 점점 커집니다. 그러나 상자와 div는 동일한 너비로 유지됩니다. 최소 너비를 사용하면 div와 상자를 줄이는 것을 피할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/11689353/disable-pinch-zoom-on-mobile-web