모바일 사파리에서 뷰포트 메타 태그를 즉시 변경할 수 있습니까?
다양한 유형의 콘텐츠를 표시해야하는 모바일 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;
누군가에게 도움이되기를 바랍니다. 해결책을 찾기 전에 마우스를 두드리는 데 몇 시간을 보냈습니다.
'IT story' 카테고리의 다른 글
| JavaFX 및 OpenJDK (0) | 2020.08.28 |
|---|---|
| matplotlib는 ylim 값을 얻습니다. (0) | 2020.08.28 |
| 들여 쓰기 #defines (0) | 2020.08.28 |
| 최신 하드웨어에서 부동 소수점 대 정수 계산 (0) | 2020.08.28 |
| python pip : 종속성 무시 강제 설치 (0) | 2020.08.28 |