아이폰 웹 애플리케이션에서 방향을 세로 모드로 잠그려면 어떻게 해야 합니까?

아이폰 웹 애플리케이션에서 방향을 세로 모드로 잠그려면 어떻게 해야 합니까?

iPhone 웹 응용 프로그램을 만들고 있는데 방향을 세로 모드로 잠그려고 합니다.이것이 가능합니까?이를 위한 웹킷 확장 기능이 있습니까?

이것은 모바일 사파리용 HTML 및 JavaScript로 작성된 애플리케이션이며, Objective-C로 작성된 네이티브 애플리케이션이 아닙니다.

이것은 꽤 엉터리 해결책이지만, 적어도 뭔가(?)입니다.이 아이디어는 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);
});

코드는 페이지의 전체 내용이 본문 요소 바로 안에 있는 div 안에 있을 것으로 예상합니다.가로 모드에서 div를 90도 회전시킵니다. 다시 세로로 회전합니다.

독자에게 연습으로 남겨짐: 디브는 중심점을 중심으로 회전하므로 완벽하게 정사각형이 아닌 한 위치를 조정해야 할 것입니다.

또한 매력적이지 않은 시각적 문제도 있습니다.방향을 변경하면 Safari가 천천히 회전하고 최상위 디브가 90도로 바뀝니다.더 많은 재미를 위해, 추가.

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

당신의 CSS로.장치가 회전하면 Safari가 회전하고 페이지 내용이 회전합니다.유혹해요!

뷰포트 방향을 기준으로 CSS 스타일을 지정할 수 있습니다.body[orient="body"] 또는 body[orient="body"]로 브라우저를 대상으로 합니다.

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

우리 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 미만인 기기가 거의 없기 때문에 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+에서만 작동합니다.

그러나 오페라나 사파리에서는 아직 작동하지 않습니다.

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를 사용하여 래핑 요소에 클래스 이름을 추가합니다(이 예에서는 본문 태그를 사용함).

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년에 이 작업을 수행하려면 다음이 필요합니다.

• Cordova(4.0 이상 버전이 더 좋더라도)
• PhoneGap(PhoneGap을 사용할 수도 있으며 플러그인이 호환됨)

또한 Cordova 버전에 따라 다음 플러그인 중 하나가 제공됩니다.

• net.yoik.cordova.plugins.화면 방향(cordova < 4)

cordova 플러그인 add net.yoik.codova.plugins.screen 방향

• cordova 플러그인 추가 cordova-vlan-screen-orientation (Cordova > = 4)

cordova 플러그인 cordova-vlan-screen 방향 추가

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

screen.lockOrientation('landscape');

잠금 해제 방법:

screen.unlockOrientation();

가능한 방향:

• priotal-primary 방향이 기본 priotal 모드에 있습니다.

• portra-secondary 방향은 보조 portra 모드입니다.

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

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

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

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

언급URL : https://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application