Bagaimana cara mengunci orientasi ke mode potret di Aplikasi Web iPhone?

Saya sedang membangun Aplikasi Web iPhone dan ingin mengunci orientasi ke mode potret. apakah ini mungkin? Apakah ada ekstensi web-kit untuk melakukan ini?

Harap dicatat ini adalah aplikasi yang ditulis dalam HTML dan JavaScript untuk Mobile Safari, BUKAN aplikasi asli yang ditulis dalam Objective-C.

Anda dapat menentukan gaya CSS berdasarkan orientasi viewport: Targetkan browser dengan body [orient = "landscape"] atau body [orient = "portrait"]

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

Namun...

Pendekatan Apple untuk masalah ini adalah untuk memungkinkan pengembang untuk mengubah CSS berdasarkan perubahan orientasi tetapi tidak untuk mencegah orientasi ulang sepenuhnya. Saya menemukan pertanyaan serupa di tempat lain:

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

Ini adalah solusi yang cukup rumit, tetapi setidaknya sesuatu (?). Idenya adalah menggunakan transformasi CSS untuk memutar konten halaman Anda ke mode potret semu. Berikut ini kode JavaScript (dinyatakan dalam jQuery) untuk membantu Anda memulai:

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

Kode mengharapkan seluruh isi halaman Anda untuk hidup di dalam div tepat di dalam elemen tubuh. Ini memutar div 90 derajat dalam mode lansekap - kembali ke potret.

Dibiarkan sebagai latihan untuk pembaca: div berputar di sekitar titik tengahnya, sehingga posisinya mungkin perlu disesuaikan kecuali itu persegi sempurna.

Juga, ada masalah visual yang tidak menarik. Ketika Anda mengubah orientasi, Safari berputar perlahan, kemudian div tingkat atas terkunci hingga 90 derajat berbeda. Untuk lebih menyenangkan, tambahkan

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

ke CSS Anda. Ketika perangkat berputar, maka Safari melakukannya, kemudian konten halaman Anda. Memperdulikan!

Jawaban ini belum memungkinkan, tetapi saya mempostingnya untuk "generasi masa depan". Semoga suatu hari kita dapat melakukan ini melalui aturan CSS @viewport:

@viewport {
    orientation: portrait;
}

Berikut adalah halaman "Dapatkah Saya Menggunakan" (pada 2019 hanya IE dan Edge):
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

Spec (dalam proses penulisan):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

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

Berdasarkan tabel kompatibilitas browser MDN dan artikel berikut ini, sepertinya ada beberapa dukungan di versi IE dan Opera tertentu:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Spesifikasi JS API ini juga terlihat relevan:
https://w3c.github.io/screen-orientation/

Saya berasumsi bahwa karena itu mungkin dengan @viewportaturan yang diusulkan , bahwa itu akan mungkin dengan menetapkan orientationdalam pengaturan viewport dalam sebuah metatag, tetapi sejauh ini saya tidak berhasil.

Jangan ragu untuk memperbarui jawaban ini ketika semuanya membaik.

Kode berikut digunakan di game html5 kami.

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

Saya datang dengan metode hanya CSS ini memutar layar menggunakan permintaan media. Kueri didasarkan pada ukuran layar yang saya temukan di sini . 480px tampaknya baik karena tidak ada / beberapa perangkat memiliki lebar lebih dari 480px atau kurang dari 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() menyelesaikan masalah ini, meskipun dukungannya kurang universal pada saat itu (April 2017):

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

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

Saya suka gagasan memberi tahu pengguna untuk mengembalikan ponselnya ke mode potret. Seperti disebutkan di sini: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... tetapi menggunakan CSS alih-alih JavaScript.

Mungkin di masa depan yang baru ia akan memiliki solusion ...

Adapun Mei 2015,

ada fungsi eksperimental yang melakukan itu.

Tapi itu hanya berfungsi di Firefox 18+, IE11 +, dan Chrome 38+.

Namun, ini belum berfungsi di Opera atau Safari.

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

Berikut adalah kode saat ini untuk browser yang kompatibel:

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

lockOrientation("landscape-primary");

Meskipun Anda tidak dapat mencegah perubahan orientasi agar tidak berlaku, Anda dapat meniru tidak ada perubahan sebagaimana dinyatakan dalam jawaban lain.

Pertama-tama deteksi orientasi atau reorientasi perangkat dan, menggunakan JavaScript, tambahkan nama kelas ke elemen pembungkus Anda (dalam contoh ini saya menggunakan tag tubuh).

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

Kemudian jika perangkat lanskap, gunakan CSS untuk mengatur lebar badan ke tinggi viewport dan tinggi tubuh ke lebar viewport. Dan mari kita atur transformasi asal saat kita berada di sana.

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

Sekarang, reorientasi elemen tubuh dan geser (terjemahkan) ke posisi.

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

Ini, atau solusi CSS serupa, setidaknya akan mempertahankan tata letak Anda jika itu yang Anda cari.

Solusi root adalah memperhitungkan kemampuan perangkat daripada berusaha membatasi mereka. Jika perangkat tidak memungkinkan Anda membatasi yang tepat daripada peretasan sederhana adalah pilihan terbaik karena desain pada dasarnya tidak lengkap. Semakin sederhana semakin baik.

Dalam kopi jika ada yang membutuhkannya.

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

Terinspirasi dari jawaban @ Grumdrig, dan karena beberapa instruksi yang digunakan tidak akan berfungsi, saya menyarankan skrip berikut jika diperlukan oleh orang lain:

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

Saya memiliki masalah yang serupa, tetapi untuk membuat lansekap ... Saya percaya kode di bawah ini harus melakukan trik:

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

Klik di sini untuk tutorial dan contoh kerja dari situs web saya.

Anda tidak perlu lagi menggunakan peretasan hanya untuk melihat jQuery Mobile Screen Orientation atau Anda harus menggunakan PhoneGap lagi, kecuali Anda benar-benar menggunakan PhoneGap.

Untuk membuat ini bekerja di tahun 2015 kita perlu:

• Cordova (versi apa pun meskipun apa pun di atas 4.0 lebih baik)
• PhoneGap (Anda bahkan dapat menggunakan PhoneGap, plugin yang kompatibel)

Dan salah satu plugin ini tergantung pada versi Cordova Anda:

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

plugin cordova tambahkan net.yoik.cordova.plugins.screenorientation

• plugin cordova tambahkan cordova-plugin-layar-orientasi (Cordova> = 4)

plugin cordova menambahkan cordova-plugin-layar-orientasi

Dan untuk mengunci orientasi layar cukup gunakan fungsi ini:

screen.lockOrientation('landscape');

Untuk membukanya:

screen.unlockOrientation();

Orientasi yang mungkin:

• portrait-primary Orientasi berada dalam mode potret primer.

• portrait-secondary Orientasi dalam mode potret sekunder.

• landscape-primary Orientasi berada dalam mode lansekap primer.

• landscape-secondary Orientasi dalam mode lansekap sekunder.

• portrait Orientasi dapat berupa potret-primer atau potret-sekunder (sensor).

• landscape Orientasinya adalah landscape-primary atau landscape-secondary (sensor).