iPhone 웹 응용 프로그램에서 방향을 세로 모드로 잠 그려면 어떻게합니까?

iPhone 웹 응용 프로그램을 만들고 있는데 방향을 세로 모드로 잠그고 싶습니다. 이게 가능해? 이를위한 웹 키트 확장이 있습니까?

모바일 Safari 용 HTML 및 JavaScript로 작성된 응용 프로그램이며 Objective-C로 작성된 기본 응용 프로그램이 아닙니다.

뷰포트 방향에 따라 CSS 스타일을 지정할 수 있습니다. body [orient = "landscape"] 또는 body [orient = "portrait"]

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

하나...

이 문제에 대한 Apple의 접근 방식은 개발자가 방향 변경에 따라 CSS를 변경할 수 있지만 방향이 완전히 바뀌지 않도록하는 것입니다. 다른 곳에서 비슷한 질문을 발견했습니다.

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

이것은 꽤 해킹 된 솔루션이지만 적어도 뭔가 (?)입니다. 아이디어는 CSS 변환을 사용하여 페이지의 내용을 준 초상화 모드로 회전시키는 것입니다. 시작하는 JavaScript (jQuery로 표시) 코드는 다음과 같습니다.

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

이 코드는 페이지의 전체 내용이 body 요소 내부의 div 안에 있어야합니다. 가로 모드에서 세로 방향으로 90도 회전합니다.

독자에게 연습으로 남겨 두십시오 : div가 중심점을 중심으로 회전하므로 완벽하게 정사각형이 아닌 한 위치를 조정해야합니다.

또한 눈에 띄지 않는 시각적 문제가 있습니다. 방향을 변경하면 Safari가 느리게 회전 한 다음 최상위 div가 90 도씩 달라집니다. 더 재미있게, 추가

body > div { -webkit-transition: all 1s ease-in-out; }

CSS에. 장비가 회전하면 Safari가 페이지 내용을 변경합니다. 속이는!

이 답변은 아직 불가능하지만 "미래 세대"를 위해 게시하고 있습니다. 언젠가 CSS @viewport 규칙을 통해이 작업을 수행 할 수 있기를 바랍니다.

@viewport {
    orientation: portrait;
}

다음은 "사용할 수있는"페이지입니다 (2019 년 현재 IE 및 Edge 만 해당).
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

사양 (처리 중) :
https://drafts.csswg.org/css-device-adapt/#orientation-desc

MDN :
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

MDN 브라우저 호환성 표 및 다음 기사를 기반으로 특정 버전의 IE 및 Opera에서 일부 지원이있는 것 같습니다.
http://menacingcloud.com/?c=cssViewportOrMetaTag

이 JS API 사양도 관련이 있습니다.
https://w3c.github.io/screen-orientation/

제안 된 @viewport규칙 으로 가능했기 때문에 태그 orientation의 뷰포트 설정에서 설정하면 가능할 것이라고 가정 meta했지만 지금까지는 성공하지 못했습니다.

상황이 개선됨에 따라이 답변을 자유롭게 업데이트하십시오.

다음 코드는 html5 게임에서 사용되었습니다.

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

미디어 쿼리를 사용하여 화면을 회전시키는이 CSS 전용 방법을 생각해 냈습니다. 검색어는 여기에서 찾은 화면 크기 를 기준으로 합니다 . 480px는 너비가 480px 이상이거나 높이가 480px 미만인 장치가 거의 없기 때문에 좋았습니다.

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

Screen.lockOrientation() 지원이 당시 보편적이지는 않지만 (2017 년 4 월)이 문제를 해결합니다.

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

사용자에게 휴대 전화를 세로 모드로 되돌 리라고 알려주는 아이디어가 마음에 듭니다. 그것은 여기에 언급처럼 : http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...하지만 자바 스크립트 대신 CSS를 활용.

아마도 새로운 미래에는 즉시 사용 가능한 솔루션이있을 것입니다 ...

2015 년 5 월은

이를 수행하는 실험적인 기능이 있습니다.

그러나 Firefox 18+, IE11 + 및 Chrome 38 이상에서만 작동합니다.

그러나 Opera 나 Safari에서는 아직 작동하지 않습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

호환 가능한 브라우저의 현재 코드는 다음과 같습니다.

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

방향 변경이 적용되는 것을 막을 수는 없지만 다른 답변에 명시된대로 변경을 모방 할 수는 없습니다.

먼저 장치 방향 또는 방향을 감지하고 JavaScript를 사용하여 래핑 요소에 클래스 이름을 추가하십시오 (이 예제에서는 body 태그를 사용함).

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

그런 다음 장치가 가로 인 경우 CSS를 사용하여 바디 너비를 뷰포트 높이로 설정하고 바디 높이를 뷰포트 너비로 설정하십시오. 그리고 변환 원점을 설정하는 동안 설정합니다.

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

이제 본문 요소의 방향을 바꾸고 해당 위치로 슬라이드 (번역)합니다.

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

이것 또는 유사한 CSS 솔루션은 레이아웃이 나중에 유지되는 경우 최소한 레이아웃을 유지합니다.

루트 솔루션은 장치의 기능을 제한하지 않고 설명합니다. 장치가 단순한 해킹보다 적절한 제한을 허용하지 않으면 디자인이 본질적으로 불완전하기 때문에 최선의 방법입니다. 간단할수록 좋습니다.

커피가 필요하다면

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

@Grumdrig의 답변에서 영감을 얻었으며 사용 된 지침 중 일부가 작동하지 않기 때문에 다른 사람이 필요하면 다음 스크립트를 제안합니다.

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

비슷한 문제가 있지만 조경하려면 ... 아래 코드가 트릭을 수행해야한다고 생각합니다.

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

내 웹 사이트의 자습서 및 실제 예제를 보려면 여기 를 클릭 하십시오 .

실제로 PhoneGap을 사용하지 않는 한 jQuery 모바일 화면 방향을보기 위해 더 이상 핵을 사용할 필요가 없으며 더 이상 PhoneGap을 사용하지 않아도됩니다.

2015 년에이 작업을 수행하려면 다음이 필요합니다.

• 코르도바 (4.0 이상인 것이 더 낫다)
• PhoneGap (PhoneGap도 사용할 수 있으며 플러그인은 호환 가능)

Cordova 버전에 따라 다음 플러그인 중 하나가 있습니다.

• net.yoik.cordova.plugins.screenorientation (Cordova <4)

cordova 플러그인 추가 net.yoik.cordova.plugins.screenorientation

• 코르도바 플러그인 추가 cordova-plugin-screen-orientation (Cordova> = 4)

cordova 플러그인 추가 cordova-plugin-screen-orientation

화면 방향을 잠 그려면이 기능을 사용하십시오.

screen.lockOrientation('landscape');

잠금을 해제하려면

screen.unlockOrientation();

가능한 오리엔테이션 :

• 세로-기본 방향이 기본 세로 모드입니다.

• 세로-보조 방향은 보조 세로 모드입니다.

• landscape-primary 방향이 기본 가로 모드입니다.

• landscape-secondary 방향이 보조 가로 모드입니다.

• 세로 방향은 세로 기본 또는 세로 보조 (센서)입니다.

• landscape 방향은 landscape-primary 또는 landscape-secondary (센서)입니다.