Jak zablokować orientację w trybie portretowym w aplikacji internetowej iPhone ' a?

To dość trudne rozwiązanie, ale przynajmniej coś(?). Chodzi o to, aby użyć transformacji CSS, aby obrócić zawartość strony do trybu quasi-portretowego. Oto kod JavaScript (wyrażony w jQuery) na początek:

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

Kod oczekuje, że cała zawartość twojej strony będzie znajdować się wewnątrz div tylko wewnątrz elementu body. Obraca się o 90 stopni w trybie krajobrazowym-z powrotem do portretu.

Pozostawione jako ćwiczenie dla czytelnika: div obraca się wokół swojego punkt środkowy, więc jego pozycja będzie musiała być regulowana, chyba że jest idealnie kwadratowa.

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

Do twojego CSS. Gdy urządzenie się obraca, Safari tak robi, a zawartość strony tak. Urzekające!

Ta odpowiedź nie jest jeszcze możliwa, ale zamieszczam ją dla "przyszłych pokoleń". Mam nadzieję, że pewnego dnia uda nam się to zrobić za pomocą reguły CSS @viewport:

@viewport {
    orientation: portrait;
}

Spec (w procesie):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

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

Na podstawie tabeli zgodności przeglądarki MDN i poniższego artykułu, wygląda na to, że istnieje pewne wsparcie w niektóre wersje IE i opery:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Ta Specyfikacja JS API również wygląda na odpowiednią:
https://w3c.github.io/screen-orientation/

Założyłem, że ponieważ jest to możliwe z proponowaną regułą @viewport, będzie to możliwe poprzez ustawienie orientation w Ustawieniach viewportu w znaczniku meta, ale jak dotąd nie odniosłem z tym sukcesu.

Prosimy o aktualizację tej odpowiedzi, gdy sytuacja się poprawi.

Poniższy kod został użyty w naszej grze 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'); 
});

Wymyśliłem tę jedyną metodę CSS obracania ekranu za pomocą zapytań o media. Zapytania są oparte na rozmiarach ekranu , które znalazłem tutaj . 480px wydawało się być dobre, ponieważ nie/kilka urządzeń miało więcej niż 480px szerokości lub mniej niż 480px wysokości.

@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() rozwiązuje ten problem, chociaż wsparcie jest mniej niż uniwersalne w tym czasie (Kwiecień 2017): {]}

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

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

Podoba mi się pomysł, aby powiedzieć użytkownikowi, aby umieścić swój telefon z powrotem w trybie portretowym. Jak to jest wspomniane tutaj: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...ale używając CSS zamiast JavaScript.

Może w nowej przyszłości będzie to miało rozwiązanie out-of-the-box...

Stan na Maj 2015,

Istnieje eksperymentalna funkcjonalność, która to robi.

Jednak nie działa jeszcze w Operze ani Safari.

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

Oto aktualny kod dla kompatybilnych przeglądarek:

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

lockOrientation("landscape-primary");

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

To, lub podobne rozwiązanie CSS, przynajmniej zachowa twój układ, jeśli tego właśnie szukasz.

Rozwiązanie główne uwzględnia możliwości urządzenia, a nie próbuje je ograniczyć. Jeśli urządzenie nie pozwala na odpowiednie ograniczenie niż prosty hack jest najlepszym rozwiązaniem, ponieważ projekt jest zasadniczo niekompletny. Im prościej, tym lepiej.

W kawie, jeśli ktoś jej potrzebuje.

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

Chociaż nie możesz zapobiec zmianie orientacji, możesz nie naśladować żadnej zmiany, jak podano w innych odpowiedziach.

Najpierw Wykryj orientację lub reorientację urządzenia i, używając JavaScript, Dodaj nazwę klasy do elementu zawijania(w tym przykładzie używam znacznika 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();

Następnie, jeśli urządzenie jest poziome, użyj CSS, aby ustawić szerokość ciała na wysokość viewport i wysokość ciała na szerokość viewport. I ustawmy pochodzenie transformaty, gdy będziemy na to.

@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%);
}

Zainspirowany odpowiedzią @ Grumdrig, a ponieważ niektóre z użytych instrukcji by nie działały, proponuję następujący skrypt, jeśli jest potrzebny komuś innemu:

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

Kliknij TUTAJ Aby uzyskać tutorial i działający przykład z mojej strony.

Nie musisz już używać hacków tylko po to, aby zobaczyć orientację ekranu mobilnego jQuery, ani nie powinieneś już używać PhoneGap, chyba że faktycznie używasz PhoneGap.

Aby to zadziałało w roku 2015, potrzebujemy:

• Cordova (każda wersja, choć wszystko powyżej 4.0 jest lepsze)
• PhoneGap (możesz nawet używać PhoneGap, wtyczki są kompatybilne)

I jedna z tych wtyczek w zależności od wersji Cordova:

• netto.yoik.cordova.wtyczki.screen orientation (Cordova

• cordova plugin add cordova-plugin-screen-orientation (Cordova >= 4)

Cordova plugin dodaj cordova-plugin-screen-orientation

I aby zablokować orientację ekranu, Użyj tej funkcji:

screen.lockOrientation('landscape');

Aby go odblokować:

screen.unlockOrientation();

Możliwe orientacja:

• Portrait-primary orientacja jest w trybie primary portrait.

• Portrait-secondary orientacja jest w trybie portretu wtórnego.

• Landscape-primary orientacja jest w podstawowym trybie krajobrazowym.

• Landscape-secondary orientacja jest w trybie Krajobraz secondary.

• Portret orientacja jest albo portrait-podstawowy lub portrait-wtórny (sensor).

• Krajobraz orientacja jest albo krajobrazowo-pierwotna, albo krajobrazowo-wtórna (czujnik).