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

Question

Я создаю веб-приложение для iPhone и хочу заблокировать ориентацию в портретном режиме. Это возможно? Существуют ли какие-либо расширения для веб-кит?

Обратите внимание, что это приложение, написанное в формате HTML и JavaScript для Mobile Safari, оно не является родным приложением, написанным в Objective-C.

Answer 1

Вы можете задать стили CSS на основе ориентации видового экрана: Target браузер с телом [ориентируют = "ландшафтной"] или тела [сориентировать = "портрет"]

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

Answer 2

Это довольно Hacky решение, но это, по крайней мере что-то (?). Идея заключается в использовании 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); 
}); 

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

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

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

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

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

Answer 3

Следующий код был использован в нашей игре 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'); 
}); 

Answer 4

Мне нравится идея заставить пользователя вернуть телефон в портретный режим. Как это уже упоминалось здесь: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... но используя CSS вместо JavaScript.

Answer 5

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

@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 Spec также выглядит уместным:
https://w3c.github.io/screen-orientation/

Я предположил, что, поскольку это было возможно с предложенным @viewport правилом, что было бы возможно путем установки orientation в настройках окна просмотра в meta теге , но до сих пор я этого не добился.

Не стесняйтесь обновлять этот ответ по мере улучшения ситуации.

Answer 6

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

Это, или аналогичное решение для CSS, по крайней мере сохранит ваш макет, если это то, что вам нужно.

Корневое решение учитывает возможности устройства, а не пытается их ограничить. Если устройство не позволяет вам получить соответствующее ограничение, чем простой взлом, это лучший выбор, поскольку дизайн по существу неполный. Чем проще, тем лучше.

Answer 7

Screen.lockOrientation() решает эту проблему, хотя поддержка менее универсальны в то время (апрель 2017):

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

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

Answer 8

Я придумал этот CSS единственный способ поворота экрана с помощью медиа-запросов. Запросы основаны на размерах экрана that I found here. 480px показалось хорошим, поскольку никакие/несколько устройств имели ширину более 480 пикселей или менее 480 пикселей.

@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

В кофе, если кому-то это нужно.

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

Может быть, в новом будущем она будет иметь вне коробки soludion ...

В течение мая 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"); 

Answer 11

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

Вам больше не нужно использовать хаки, чтобы просто посмотреть экран ориентации мобильного телефона jQuery, и вам больше не нужно использовать PhoneGap, если вы фактически не используете PhoneGap.

Чтобы сделать эту работу в 2015 году нам нужно:

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

И один из этих плагинов в зависимости от версии Кордова:

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

Cordova плагин добавить net.yoik.cordova.plugins.screenorientation

• Cordova плагин добавить Cordova-плагин Экранное ориентации (Кордова> = 4)

Cordova плагин добавить Cordova-плагин-экран ориентации

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

screen.lockOrientation('landscape'); 

Для того, чтобы разблокировать:

screen.unlockOrientation(); 

Возможные направления:

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

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

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

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

• портрет Ориентация либо портретная, либо портретная (сенсорная).

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

Answer 12

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

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

Answer 13

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