Làm cách nào để khóa hướng sang chế độ dọc trong Ứng dụng web iPhone?

Tôi đang xây dựng Ứng dụng web cho iPhone và muốn khóa hướng sang chế độ dọc. điều này có thể không Có bất kỳ phần mở rộng bộ công cụ web để làm điều này?

Xin lưu ý đây là một ứng dụng được viết bằng HTML và JavaScript cho Mobile Safari, nó KHÔNG phải là một ứng dụng gốc được viết bằng Objective-C.

Bạn có thể chỉ định các kiểu CSS dựa trên hướng khung nhìn: Nhắm mục tiêu trình duyệt với body [direction = "cảnh"] hoặc body [direction = "Portrait"]

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

Tuy nhiên...

Cách tiếp cận của Apple đối với vấn đề này là cho phép nhà phát triển thay đổi CSS dựa trên thay đổi định hướng nhưng không ngăn chặn hoàn toàn định hướng lại. Tôi tìm thấy một câu hỏi tương tự ở nơi khác:

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

Đây là một giải pháp khá hay, nhưng ít nhất là một cái gì đó (?). Ý tưởng là sử dụng một biến đổi CSS để xoay nội dung trang của bạn sang chế độ gần như chân dung. Đây là mã JavaScript (được thể hiện bằng jQuery) để giúp bạn bắt đầu:

$(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);
});

Mã này hy vọng toàn bộ nội dung trang của bạn sẽ sống trong một div ngay bên trong phần tử cơ thể. Nó xoay div 90 độ trong chế độ nằm ngang - trở lại chân dung.

Còn lại như một bài tập cho người đọc: div xoay quanh điểm trung tâm của nó, vì vậy vị trí của nó có thể sẽ cần phải được điều chỉnh trừ khi nó hoàn toàn vuông.

Ngoài ra, có một vấn đề hình ảnh hấp dẫn. Khi bạn thay đổi hướng, Safari sẽ quay chậm, sau đó div cấp cao nhất chuyển sang 90 độ khác nhau. Để vui hơn nữa, hãy thêm

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

CSS của bạn. Khi thiết bị quay, thì Safari sẽ thực hiện, sau đó nội dung trang của bạn sẽ thực hiện. Bắt đầu!

Câu trả lời này vẫn chưa thể thực hiện được, nhưng tôi đang đăng nó cho "thế hệ tương lai". Hy vọng, một ngày nào đó chúng ta sẽ có thể làm điều này thông qua quy tắc CSS @viewport:

@viewport {
    orientation: portrait;
}

Đây là trang "Tôi có thể sử dụng" (tính đến năm 2019 chỉ có IE và Edge):
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

Spec (đang xử lý):
https://dcraft.csswg.org/css-device-adapt/#orientation-desc

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

Dựa trên bảng tương thích trình duyệt MDN và bài viết sau, có vẻ như có một số hỗ trợ trong các phiên bản nhất định của IE và Opera:
http://menacescloud.com/?c=cssViewportOrMetaTag

Thông số API API này cũng có vẻ phù hợp:
https://w3c.github.io/screen-orientation/

Tôi đã giả định rằng vì có thể với @viewportquy tắc được đề xuất , nên có thể bằng cách đặt orientationtrong cài đặt chế độ xem trong metathẻ, nhưng tôi đã không thành công với điều này cho đến nay.

Hãy cập nhật câu trả lời này khi mọi thứ được cải thiện.

Đoạn mã sau đã được sử dụng trong trò chơi html5 của chúng tôi.

$(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'); 
});

Tôi đã đưa ra phương pháp chỉ xoay CSS màn hình này bằng các truy vấn phương tiện. Các truy vấn dựa trên kích thước màn hình mà tôi tìm thấy ở đây . 480px dường như là tốt vì không có / vài thiết bị có chiều rộng hơn 480px hoặc chiều cao dưới 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() giải quyết vấn đề này, mặc dù hỗ trợ ít hơn phổ quát tại thời điểm đó (tháng 4 năm 2017):

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

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

Tôi thích ý tưởng bảo người dùng đưa điện thoại của mình trở lại chế độ dọc. Giống như nó được đề cập ở đây: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... nhưng sử dụng CSS thay vì JavaScript.

Có lẽ trong một tương lai mới, nó sẽ có một cuộc giải quyết ngoài lề ...

Vào tháng 5 năm 2015,

có một chức năng thử nghiệm làm điều đó.

Nhưng nó chỉ hoạt động trên Firefox 18+, IE11 + và Chrome 38+.

Tuy nhiên, nó không hoạt động trên Opera hoặc Safari.

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

Đây là mã hiện tại cho các trình duyệt tương thích:

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

lockOrientation("landscape-primary");

Mặc dù bạn không thể ngăn thay đổi định hướng có hiệu lực, bạn có thể mô phỏng không có thay đổi như đã nêu trong các câu trả lời khác.

Trước tiên, phát hiện định hướng hoặc định hướng lại thiết bị và, bằng cách sử dụng JavaScript, thêm tên lớp vào thành phần gói của bạn (trong ví dụ này tôi sử dụng thẻ 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();

Sau đó, nếu thiết bị là ngang, sử dụng CSS để đặt chiều rộng thân thành chiều cao của khung nhìn và chiều cao thân thành chiều rộng của khung nhìn. Và hãy thiết lập nguồn gốc biến đổi trong khi chúng ta đang ở đó.

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

Bây giờ, định hướng lại phần tử cơ thể và trượt (dịch) nó vào vị trí.

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;
}

Điều này, hoặc một giải pháp CSS tương tự, ít nhất sẽ giữ nguyên bố cục của bạn nếu đó là những gì bạn đang theo đuổi.

Giải pháp gốc là tính toán các khả năng của thiết bị thay vì cố gắng hạn chế chúng. Nếu thiết bị không cho phép bạn giới hạn phù hợp thì một hack đơn giản là lựa chọn tốt nhất của bạn vì thiết kế về cơ bản chưa hoàn thiện. Càng đơn giản càng tốt.

Trong cà phê nếu ai cần nó.

    $(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)"

Lấy cảm hứng từ câu trả lời của @ Grumdrig và vì một số hướng dẫn đã sử dụng sẽ không hoạt động, tôi đề xuất tập lệnh sau nếu cần bởi người khác:

    $(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);
    });

Tôi có một vấn đề tương tự, nhưng để tạo cảnh quan ... Tôi tin rằng đoạn mã dưới đây nên thực hiện thủ thuật:

//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>

Nhấn vào đây để xem hướng dẫn và ví dụ làm việc từ trang web của tôi.

Bạn không còn cần phải sử dụng các bản hack chỉ để xem Định hướng màn hình di động jQuery cũng như không nên sử dụng PhoneGap nữa, trừ khi bạn thực sự sử dụng PhoneGap.

Để thực hiện công việc này trong năm 2015, chúng tôi cần:

• Cordova (bất kỳ phiên bản nào dù có gì trên 4.0 đều tốt hơn)
• PhoneGap (thậm chí bạn có thể sử dụng PhoneGap, các plugin tương thích)

Và một trong những plugin này tùy thuộc vào phiên bản Cordova của bạn:

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

plugin cordova thêm net.yoik.cordova.plugins.screenorientation

• plugin cordova thêm định hướng cordova-plugin-màn hình (Cordova> = 4)

plugin cordova thêm cordova-plugin-định hướng màn hình

Và để khóa hướng màn hình, chỉ cần sử dụng chức năng này:

screen.lockOrientation('landscape');

Để mở khóa:

screen.unlockOrientation();

Định hướng có thể:

• Portrait-sơ cấp Định hướng ở chế độ chân dung chính.

• chân dung phụ Các hướng ở chế độ chân dung phụ.

• cảnh quan chính Chính hướng ở chế độ cảnh quan chính.

• phong cảnh-thứ cấp Định hướng là trong chế độ cảnh quan thứ cấp.

• chân dung Hướng là chân dung chính hoặc chân dung phụ (cảm biến).

• phong cảnh Định hướng là cảnh quan chính hoặc cảnh quan phụ (cảm biến).