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

Question

Tôi đang xây dựng một Ứng dụng web 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 web-kit để 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à ứng dụng gốc được viết trong Objective-C.

Answer 1

Bạn có thể chỉ định kiểu CSS dựa trên khuynh hướng viewport: Target trình duyệt với cơ thể [orient = "cảnh quan"] hoặc cơ thể [orient = "chân dung"]

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

Answer 2

Đây là một giải pháp khá hacky, nhưng nó ít nhất một cái gì đó (?). Ý tưởng là sử dụng chuyển đổi CSS để xoay nội dung của trang sang chế độ bán dọc. Dưới đây là mã JavaScript (được thể hiện trong 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ã hy vọng toàn bộ nội dung trang của bạn sẽ nằm bên trong phần tử bên trong phần tử nội dung. Nó quay mà div 90 độ trong chế độ phong cảnh - trở lại chân dung.

Còn lại như một bài tập cho người đọc: div quay quanh điểm giữa 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ó vấn đề về hình ảnh không hấp dẫn. Khi bạn thay đổi hướng, Safari quay chậm, khi đó div cấp cao nhất sẽ quay sang 90 độ khác nhau. Để có nhiều niềm vui hơn, hãy thêm

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

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

Answer 3

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

Answer 4

Tôi thích ý tưởng yêu cầu người dùng đặt điện thoại của mình trở lại chế độ dọc. Giống như đượ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.

Answer 5

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

@viewport { 
    orientation: portrait; 
} 

Spec (trong quá trình):
https://drafts.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 một số phiên bản nhất định của IE và Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag

này JS API Spec cũng có vẻ có liên quan:
https://w3c.github.io/screen-orientation/

tôi đã giả định rằng bởi vì nó là có thể với các đề xuất @viewport quy tắc, mà nó sẽ có thể bằng cách thiết lập orientation trong các thiết lập viewport trong một thẻ meta , nhưng tôi đã không thành công với điều này cho đến nay.

Vui lòng cập nhật câu trả lời này khi mọi thứ cải thiện.

Answer 6

// 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 làm.

Giải pháp gốc là tính toán khả năng của thiết bị thay vì cố giới hạn chúng. Nếu thiết bị không cho phép bạn giới hạn thích hợp hơn là hack đơn giản thì đây là lựa chọn tốt nhất của bạn vì thiết kế cơ bản là không đầy đủ. Đơn giản càng tốt.

Answer 7

Screen.lockOrientation() giải quyết vấn đề này, mặc dù hỗ trợ thấp hơn phổ biến vào thời điểm đó (tháng 4 năm 2017):

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

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

Answer 8

tôi đến với CSS này chỉ phương pháp xoay màn hình sử dụng truy vấn phương tiện truyền thông. Các truy vấn được dựa trên kích thước màn hình that I found here. 480px dường như là tốt vì không có/vài thiết bị có chiều rộng lớn hơn 480px hoặc chiều cao nhỏ hơn 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 
    } 
} 

Answer 9

Trong cà phê nếu cầ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)" 

Answer 10

Có lẽ trong một tương lai mới nó sẽ có một out-of-the-box soludion ...

Đối với tháng 5 năm 2015,

có một chức năng thực nghiệm nào đó.

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

Tuy nhiên, nó chưa hoạt động trên Opera hoặc Safari.

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

Đây là mã hiện hành đối với các trình duyệt tương thích:

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

lockOrientation("landscape-primary"); 

Answer 11

Bấm here cho một hướng dẫn và ví dụ làm việc kể từ trang web của tôi.

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

Để làm công việc này trong năm 2015 chúng ta cần:

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

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

• net.yoik.cordova.plugin s.screenorientation (Cordova < 4)

cordova cắm thêm net.yoik.cordova.plugins.screenorientation

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

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

Và để khóa định 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ể xảy ra:

• chân dung-chính Định hướng là ở chế độ chân dung chính.

• chân dung thứ cấp Hướng ở chế độ dọc thứ cấp.

• landscape-primary Hướng ở chế độ ngang chính.

• landscape-secondary Hướng ở chế độ ngang thứ cấp.

• chân dung Hướng là chân dung chính hoặc chân dung thứ cấp (cảm biến).

• phong cảnh Hướng là ngang hoặc chính (cảm biến).

Answer 12

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

Đầu tiên phát hiện hướng hoặc định hướng thiết bị và sử dụng JavaScript, thêm tên lớp vào phần tử bao 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ị ở chế độ ngang, hãy sử dụng CSS để đặt chiều rộng cơ thể thành chiều cao khung nhìn và chiều cao cơ thể cho chiều rộng khung nhìn. Và hãy đặt 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) vào vị trí.

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

Answer 13

Lấy cảm hứng từ @ câu trả lời Grumdrig, và bởi vì một số các hướng dẫn sử dụng sẽ không làm việc, tôi đề nghị các kịch bản sau nếu cần thiết 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); 
    });