Как заблокировать ориентацию в портретном режиме в веб-приложении iPhone?

это довольно хаки решение, но это по крайней мере что-то(?). Идея в том, чтобы использовать в CSS transform, чтобы повернуть содержимое вашей страницы в квази-портретный режим. Вот 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);
});

код ожидает, что все содержимое вашей страницы будет жить внутри div только внутри элемента body. Он поворачивает этот div на 90 градусов в ландшафтном режиме-назад к портрету.

слева в качестве упражнения для читателя: div вращается вокруг своей центральной точки, поэтому его положение, вероятно, нужно будет отрегулировать, если оно не идеально квадратное.

кроме того, есть неприятные визуальные проблемы. Когда вы меняете ориентацию, Safari медленно вращается,а затем div верхнего уровня привязывается к 90degrees. Для еще большего удовольствия, добавить

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

к вашему CSS. Когда устройство вращается, то Safari делает, то содержимое вашей страницы делает. Соблазнительно!

этот ответ пока невозможен, но я публикую его для "будущих поколений". Надеюсь, когда-нибудь мы сможем сделать это с помощью правила CSS @просмотра:

@viewport {
    orientation: portrait;
}

Spec(в процессе):
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

эта спецификация JS API также выглядит актуальной:
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 только метод поворота экрана с помощью медиа-запросов. Запросы основаны на размерах экрана что я нашел здесь. 480пкс, казалось бы хорошо, а нет/несколько устройств было больше, чем 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");

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

хотя вы не можете предотвратить изменение ориентации от вступления в силу вы не можете эмулировать никаких изменений, как указано в других ответах.

сначала определите ориентацию или переориентацию устройства и, используя 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%);
}

вдохновленный ответом @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);
    });

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

вам больше не нужно использовать хаки только для просмотра ориентации экрана jQuery Mobile, и вы больше не должны использовать PhoneGap, если вы на самом деле не используете PhoneGap.

чтобы сделать эту работу в 2015 году нам необходимо:

• Кордова (любая версия, хотя что-нибудь выше 4.0 лучше)
• эксперт (вы даже можете использовать PhoneGap, Плагины совместимый)

и один из этих плагинов в зависимости от вашей версии Cordova:

• net.ой.Кордова.подключаемый модуль.screenorientation (Кордова

cordova плагин добавить сеть.ой.Кордова.подключаемый модуль.screenorientation

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

cordova plugin добавить cordova-plugin-screen-orientation

и для блокировки ориентации экрана просто используйте эту функцию:

screen.lockOrientation('landscape');

чтобы разблокировать его:

screen.unlockOrientation();

возможные варианты:

• портрет-первичный ориентация находится в основном портретном режиме.

• портрет-вторичный ориентация находится в режиме вторичного портрета.

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

• пейзаж-вторичный ориентация находится в режиме вторичного ландшафта.

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

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