답변:
나는 이것이 조금 오래되었다는 것을 알고 있지만, 그렇습니다. 시작하기위한 몇 가지 자바 스크립트 :
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');필요한 부분 만 변경하면 Mobile Safari에서 새로운 설정을 적용합니다.
최신 정보:
소스에 메타 뷰포트 태그가 아직없는 경우 다음과 같이 직접 추가 할 수 있습니다.
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);또는 jQuery를 사용하는 경우 :
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">'); : jQuery를하지 않고, 또는document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
당신의 <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />자바 스크립트 어딘가에
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");...하지만 장치를 조정하고 몇 시간 동안 만지작 거리면서 행운을 빕니다. 아직 거기에 있지 않습니다!
이것은 대부분 답변되었지만 확장하겠습니다 ...
1 단계
내 목표는 특정 시간에 확대 / 축소를 활성화하고 다른 시간에는 비활성화하는 것이 었습니다.
// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');
// ...later...
// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');2 단계
뷰포트 태그가 업데이트되지만 핀치 줌은 여전히 활성화되었습니다 !! 변경 사항을 적용하기 위해 페이지를 가져올 방법을 찾아야했습니다 ...
해킹 솔루션이지만 신체의 불투명도를 토글하는 것이 트릭이었습니다. 이를 수행하는 다른 방법이 있다고 확신하지만 여기에 저에게 효과적이었습니다.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);3 단계
내 문제는 대부분이 시점에서 해결되었지만 완전히는 아닙니다. 페이지에 맞게 일부 요소의 크기를 조정할 수 있도록 페이지의 현재 확대 / 축소 수준을 알아야했습니다 (지도 표시를 생각해보세요).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;누군가에게 도움이되기를 바랍니다. 해결책을 찾기 전에 마우스를 두드리는 데 몇 시간을 보냈습니다.
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(일부 상황에 따라 약간 잠긴 Drupal 인스턴스에 넣습니다 ... 그래서 나는 헤드 영역에 직접 액세스 할 수없고 Javascript를 사용해야합니다)