내 웹 사이트 방문자가 작은 사진을 탭하여 더 크게 볼 수 있도록하는 계획을 구현했습니다. 탭 / 클릭하면 새 페이지 요소가 나타나고 화면에 사용할 수있는 최대 크기로 확장되어 더 높은 해상도의 이미지가 표시됩니다. 그 이유는 방문자가 관심이없는 한 고 대역폭 이미지를로드하지 않기 위해서입니다. 더 나은 고해상도 이미지가 표시되면 방문자는 휴대폰에서 일반적으로 사용되는 것처럼 손가락 집기 제스처로 이미지를 더욱 확장 할 수 있습니다. 문제는 방문자가 수동으로 사진을 확대하면 더 큰 이미지를 닫은 후 성가신 대형 페이지가 남게된다는 것입니다. 그리고 내가 무엇을하든 방문자의 이미지 수동 조정은 전체 페이지에 영향을 미칩니다.
오랫동안 이것에 대한 합리적인 해결책이 있었는데, 몇 년 전에 여기 스택 교환에서 찾았습니다. 이 같은 기능을 설정했습니다 ...
function resetScreenSize() {
var viewport = document.querySelector('meta[name="viewport"]');
if(viewport===null){
// just for test alert("no viewport meta");
return;
}
var original = viewport.getAttribute('content');
var forceScale = original+",maximum-scale=1.0";
viewport.setAttribute('content', forceScale);
setTimeout(function() {
viewport.setAttribute("content", original);
}, 100);
}
뷰포트에 "maximum-scale"값 1을 추가하여 방문자가 수행 한 수동 확대 / 축소를 취소하고 시스템이 안정 될 때까지 잠시 기다린 다음 뷰포트를 원래 설정 (최대 배율 없음)으로 되 돌리는 것이 아이디어였습니다. ). 간단한 버튼으로이 접근 방식을 테스트 한 후 방문자가 확대 / 축소 된 이미지를 닫을 때 자동으로 함수를 호출하도록 코드를 설정했습니다.
애플은 무한한 지혜로 IOS 장치가 더 이상 뷰포트 "최대 크기"와 사용자 크기 조정을 허용하지 않는 것과 같은 몇 가지 다른 옵션을 존중하지 않기로 결정한 것 같습니다. IOS의 Chrome과 같은 다른 브라우저에서도 차단 된 것 같습니다. 결과적으로 내 계획은 더 이상 작동하지 않습니다. 방문자가 전체 크기 이미지를 선택한 다음 더 확장하면 페이지를 다시로드하는 것과 같은 과감한 작업을 수행하지 않고 뷰포트를 다시 정상으로 설정할 방법이 없습니다.
나는 stackexchange에서 찾은 몇 가지 다른 접근 방식을 시도했으며 대부분은 확대 / 축소를 차단하려는 시도를 포함합니다. 그것은 내가 원하는 것이 아닙니다.
그래서 제가 고려할 수있는 또 다른 해결책이 있습니까? Facebook과 같은 거대 소셜 미디어 기업은 방문자가 이미지를 클릭하여 더 큰보기를 표시 할 수있는 방법을 가지고 있으며 방문자가 수동으로 이미지를 어떻게 확대하더라도 사진이 닫히면 정상으로 돌아갑니다. 하지만 그게 어떻게되는지 모르겠습니다.
나는 잠시 전에 비슷한 문제를 겪었고 비슷한 방식으로 고쳤습니다 .
여기서 중요한 트릭 중 하나는 100ms로 기다리는 것입니다. 0을 사용하면 코드가 즉시 실행되고 실제로 아무것도 적용되지 않습니다.
이제 Apple이 이러한 뷰포트 매개 변수에 대한 규칙을 변경 한 경우 (아마도 일부가 남용했기 때문일 수 있음), 제가 생각할 수있는 한 가지 해결책은 IFRAME을 사용하는 것입니다. 저는 페이스 북이 이미지가있는 "팝업"을 열 때마다 그 기술을 사용한다고 생각합니다. 이렇게하면 창 을 정말 쉽게 닫고 이전보기로 돌아갈 수 있습니다. 또한 뷰포트 배율 계수는 뒷면의 창이 아닌 IFRAME에서 변경됩니다. 따라서 필요한 것을 정확히 얻어야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다