[javascript] 모바일 사파리에서 뷰포트 메타 태그를 즉시 변경할 수 있습니까?

Program / 글쓴이

다양한 유형의 콘텐츠를 표시해야하는 모바일 Safari 브라우저 용으로 제작 된 AJAX 앱이 있습니다.

일부 콘텐츠를 들어, 내가 필요 user-scalable=1하고 다른 사람을 위해 내가 필요 user-scalable=0.

페이지를 새로 고치지 않고 콘텐츠 속성의 값을 수정할 수있는 방법이 있습니까?

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

답변

나는 이것이 조금 오래되었다는 것을 알고 있지만, 그렇습니다. 시작하기위한 몇 가지 자바 스크립트 :

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>

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

누군가에게 도움이되기를 바랍니다. 해결책을 찾기 전에 마우스를 두드리는 데 몇 시간을 보냈습니다.

답변