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

Program / 글쓴이

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를 활용.