JavaScript/OnorientationChange를 사용하여 iPhone에서 Safari의 스케일을 재설정하십시오.

https://stackoverflow.com/questions/1430747

07-07-2019
|

문제

본체 태그의 onorientationChange 호출을 사용하여 사용자가 휴대 전화를 보유하는 방법에 따라 다른 콘텐츠를 표시하고 있습니다. 이것은 훌륭하게 작동합니다 - 나는 하나의 div를 숨기면서 다른 하나를 보이게합니다.

초상화 모드의 DIV는 첫 번째로드에서 멋지게 보입니다. 나는 이것을 사용하여 올바른 스케일/줌을 얻습니다.

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

초상화 모드의 내용이 실행 되더라도 너비가 정확하고 사용자가 아래로 스크롤 할 수 있습니다. 조경 모드의 디스플레이도 완벽합니다. 그러나 조경 모드의 내용이 사용자에게 스크롤을 아래로 내려야하는 경우 사용자가 초상화 모드로 돌아 오면 화면이 "확대 된"상태가됩니다. 이는 조경 모드에서 사용자가 스크롤했는지 여부에 관계없이 발생합니다.

화면의 스케일/줌/너비를 올바르게 얻으려고 시도했지만 운이 없습니다. 이것을 할 방법이 있습니까?

미리 감사드립니다!

해결책

다음은 미디어 쿼리의 줌을 처리하는 데 사용하는 것입니다.

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

최대 규모는 나를 위해 팔린 것입니다. 그것은 줌 문제없이 아이폰의 초상화에서 조경으로의 전환이 실제로 매끄 럽다는 것을 의미합니다 ...

다른 팁

위에서 받아 들여진 "답변"은 실제로 답이 아닙니다. 즉, 확대 사냥을 허용하지 않는 것은 IE 사용자에게 다른 브라우저로 전환하도록 요청하는 것만 큼 나쁘다는 것입니다. 접근성이 끔찍합니다. Apple이보기 방향을 전환 할 때 이상적인 것으로 간주 한 펑키 한 줌 작업을 수행하지 않기 위해 디자인을 원하지만 먼지에 장애인 사용자를 남겨두고 있습니다. 권장되지 않습니다.

방향 변경시 디자인을 자동으로 조정하려면 미디어 쿼리 또는 JS 후크 (Screen.Width 등)를 사용해보십시오. 이것이 이러한 속성이 개발자로서 우리에게 노출되는 이유입니다.

콘텐츠가 뷰포트보다 클 때 조경에서 초상화로 변경되는 줌 레벨에 문제가있었습니다. "최소 규모 = 1.0"을 설정하면 이것을 해결했습니다.

Safari에서 웹 앱을 실행하는 경우 작동하지 않지만 자신의 앱 내에서 Uiwebview를 사용하는 경우 작동한다고 생각합니다.

나는 이것을 테스트하지 않았지만, 당신의 JavaScript가 코드의 목표 c 측면과 대화 할 수있는 쉬운 방법이 있습니다.

나도이 문제를 가지고 있다고 생각합니다. 뷰포트 태그에 "Maximum-Scale = 1.0"(및 "Minumum-Scale = 1.0"을 넣으십시오. 이것은 당신이 사용자가 스케일을 할 수 있기를 원하지 않는다고 가정합니다 (나는 그렇지 않습니다)

이를 위해 메타 태그를 사용하는 것은 작동하지 않습니다. 메타 태그의 모든 조합을 시도했습니다 orientationchange 그리고 gesturechange 가능한 이벤트, 나는 타임 아웃과 모든 종류의 멋진 JavaScript를 시도한 다음 이것을 찾았습니다.https://github.com/scottjehl/ios-orientationchange-fix

이 게시물에서 Andrew Ashbacher는 Scott Jehl이 작성한 코드에 대한 링크를 게시했습니다.

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

그것은 안에 멋지게 포장 된 솔루션입니다 iife 따라서 이름 공간 문제에 대해 걱정할 필요가 없습니다.

그냥 스크립트에 넣으십시오 ( document.ready() jQuery)와 Viola를 사용하는 경우!

줌을 비활성화하기 만하면됩니다 devicemotion 그것을 나타내는 이벤트 orientationchange 임박합니다. 실제로 작동하고 줌을 비활성화하지 않기 때문에 내가 본 최고의 솔루션입니다.

편집 :이 접근법은 특히 iPad를 각도로 잡을 때 항상 신뢰할 수있는 것은 아닙니다. 또한이 이벤트가 Gen 1 iPad에서 사용할 수 있다고 생각하지 않습니다.

당신은 설정할 수 있습니다 user-scalable 내용 속성의 속성. 이 시도:

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

에서 이 답변:

그러나 사용자 규모를 할당하면 해당 수단 웹 사이트는 확대하거나 축소 할 수 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow