Як заблокувати орієнтацію на портретний режим у веб-додатку iPhone?

Я будую веб-додаток iPhone і хочу заблокувати орієнтацію на портретний режим. це можливо? Чи є розширення веб-набору для цього?

Зверніть увагу, що це додаток, написане на HTML та JavaScript для мобільного Safari, це НЕ рідна програма, написана в Objective-C.

Ви можете вказати стилі CSS на основі орієнтації вікна перегляду: націліть на браузер тіло [orient = "пейзаж"] або body [orient = "портрет"]

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

Код очікує, що весь вміст вашої сторінки буде міститись у розділі безпосередньо серед елемента тіла. Він обертає цю диву на 90 градусів у ландшафтному режимі - назад до портретного.

Залишився читачем як вправа: дів обертається навколо своєї центральної точки, тому його положення, ймовірно, потрібно буде відрегулювати, якщо воно не буде абсолютно квадратним.

Крім того, є неприваблива проблема із зором. Якщо ви зміните орієнтацію, Safari повільно обертається, тоді діва верхнього рівня переходить на 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

Ця специфікація API JS також виглядає актуальною:
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 року):

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 замість JavaScript.

Можливо, у новому майбутньому він матиме нестандартний солюд ...

Щодо травня 2015 року,

є експериментальна функціональність, яка це робить.

Але він працює лише у Firefox 18+, IE11 + та Chrome 38+.

Однак він ще не працює на Opera чи Safari.

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

Ось поточний код для сумісних браузерів:

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

lockOrientation("landscape-primary");

Хоча ви не можете перешкодити зміні орієнтації набути чинності, ви не можете імітувати жодних змін, як зазначено в інших відповідях.

Спочатку визначте орієнтацію пристрою чи переорієнтацію пристрою та, використовуючи JavaScript, додайте ім’я класу до елемента обгортки (у цьому прикладі я використовую тег 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();

Потім, якщо пристрій має краєвид, використовуйте CSS, щоб встановити ширину тіла на висоту вікна перегляду, а висоту тіла - на ширину вікна перегляду. І давайте встановимо походження трансформації, поки ми в ньому.

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

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

Це або подібне рішення CSS, принаймні, збереже ваш макет, якщо ви це хочете.

Кореневе рішення - це облік можливостей пристрою, а не спроба їх обмеження. Якщо пристрій не дозволяє вам встановити відповідне обмеження, ніж простий злом - це найкраща ставка, оскільки дизайн по суті неповний. Чим простіше, тим краще.

У каві, якщо комусь це потрібно.

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

Натхненний відповіддю @ Grumdrig, і оскільки деякі використовувані інструкції не спрацюють, я пропоную наступний сценарій, якщо це потребує хтось інший:

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

У мене є аналогічна проблема, але щоб зробити пейзаж ... Я вважаю, що наведений нижче код повинен зробити трюк:

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

Клацніть тут для підручника та робочого прикладу з мого веб-сайту.

Вам більше не потрібно використовувати хаки лише для того, щоб шукати орієнтацію екрану на мобільний екран jQuery, а також більше не використовувати PhoneGap, якщо ви фактично не використовуєте PhoneGap.

Щоб зробити цю роботу у 2015 році нам потрібно:

• Кордова (будь-яка версія, хоч що-небудь вище 4.0 краще)
• PhoneGap (ви навіть можете використовувати PhoneGap, плагіни сумісні)

І один із цих плагінів, залежно від вашої версії Кордова:

• net.yoik.cordova.plugins.screenorientation (Кордова <4)

модуль cordova додайте net.yoik.cordova.plugins.screenorientation

• додайте кордова плагін додайте орієнтацію на екран-плагін (Кордова> = 4)

додаток cordova додає орієнтацію на шнур-плагін-екран

А для блокування орієнтації екрана просто використовуйте цю функцію:

screen.lockOrientation('landscape');

Щоб розблокувати його:

screen.unlockOrientation();

Можливі орієнтації:

• портрет-первинний Орієнтація знаходиться в режимі основного портрета.

• портрет-вторинний Орієнтація знаходиться в режимі вторинного портрета.

• ландшафт-первинний Орієнтація знаходиться в режимі первинного ландшафту.

• ландшафт-вторинний Орієнтація знаходиться в режимі вторинного ландшафту.

• портрет Орієнтація або портрет-первинний, або портрет-вторинний (датчик).

• ландшафт Орієнтація або ландшафт-первинний, або ландшафт-вторинний (датчик).