Предотвращение изменения ориентации в Safari iOS

Возможно ли избежать перехода в альбомный режим в Safari для iOS при повороте устройства?

В iOS Safari есть событие "orentationchange", я попытался перехватить его и отключить поведение по умолчанию, например:

<html>
<head>
<script type="text/javascript">
function changeOrientation(event) {
    alert("Rotate");
    event.preventDefault();
}
</script>
</head>
<body onorientationchange="changeOrientation(event);">
PAGE CONTENT
</body>
</html>

но при тестировании страницы на моем iPhone, когда я поворачиваю устройство, отображается предупреждение, но вид переключается на пейзаж. Кажется, что event.preventDefault() не останавливает вращение.

Есть ли способ заблокировать это поведение?

ОТВЕТЫ

Ответ 1

Невозможно принудительно настроить определенную ориентацию в Mobile Safari; он всегда будет авторотировать, когда пользователь поворачивает свое устройство.

Возможно, вы можете отобразить что-то для неподдерживаемых ориентаций, информируя пользователя о том, что ориентации не поддерживаются, и что им нужно повернуть устройство обратно, чтобы использовать ваше веб-приложение.

Ответ 2

Джонатан Снук имеет дело с этой проблемой. В его слайдах здесь он показывает, как (сортировать) блокировку с портретом (см. Слайды 54 и 55).

Код JS из этих слайдов:

window.addEventListener('orientationchange', function () {
    if (window.orientation == -90) {
        document.getElementById('orient').className = 'orientright';
    }
    if (window.orientation == 90) {
        document.getElementById('orient').className = 'orientleft';
    }
    if (window.orientation == 0) {
        document.getElementById('orient').className = '';
    }
}, true);

и CSS:

.orientleft #shell {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin:160px 160px;
}

.orientright #shell {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:230px 230px;
}

Я попытался заставить это работать для ландшафта на iPhone, но он никогда не выглядел на 100% правильным. Однако я пришел со следующим кодом jQueryian. Это будет в функции onready. Также обратите внимание: это было в контексте "сохранено на рабочем столе", и я думаю, что это изменило положение происхождения транца.

$(window).bind('orientationchange', function(e, onready){
   if(onready){
       $(document.body).addClass('portrait-onready');
   }
   if (Math.abs(window.orientation) != 90){
       $(document.body).addClass('portrait');
   } 
   else {
       $(document.body).removeClass('portrait').removeClass('portrait-onready');
   }
});
$(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure

И CSS:

.portrait {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 200px 190px;
}
.portrait-onready {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 165px 150px;
}

Надеюсь, что кто-то приблизится к желаемому результату...

Ответ 3

A spec, чтобы реализовать эту функциональность.

Также см. эту ошибку Chromium для получения дополнительной информации (до сих пор неясно, будет ли она реализована в WebKit или Chromium).

Ответ 4

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

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

Ответ 5

Возможно в новом будущем...

Что касается мая 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");

Ответ 6

Я думаю, что для нашего случая, когда нам нужно обеспечить согласованное представление данных, которые мы показываем на экране для медицинских обследований, нельзя разрешить вращение экрана устройства. Мы разрабатываем приложение для работы в портрете. Поэтому лучшим решением для использования является либо блокировка, которая не может быть выполнена через браузер, либо отображение сообщения об ошибке/сообщении, указывающее, что приложение не может использоваться до тех пор, пока ориентация не будет исправлена.

Ответ 7

Следующее решение, похоже, работает для меня на iPhone4, 5, 6 и 6+ по состоянию на июнь 2016 года.

<script>
  /**
   * we are locking mobile devices orientation to portrait mode only
   */
  var devWidth, devHeight;
  window.addEventListener('load', function() {
    devWidth  = screen.width;
    devHeight = screen.height;
  });
  window.addEventListener('orientationchange', function () {
    if (devWidth < 768 && (window.orientation === 90 || window.orientation == -90)) {
      document.body.style.width = devWidth + 'px';
      document.body.style.height = devHeight + 'px';
      document.body.style.transform = 'rotate(90deg)';
      document.body.style.transformOrigin = ''+(devHeight/2)+'px '+(devHeight/2)+'px';
    } else {
      document.body.removeAttribute('style');
    }
  }, true);
</script>

Ответ 8

Если это возможно (я не верю, что это так), я бы настоятельно советовал ему. Пользователи ненавидят принуждение к просмотру страниц определенным образом. Что, если они используют свой iphone в доке и не выдерживают этого в ландшафтном режиме, не отстыкая его, или что, если они предпочитают альбомную версию клавиатуры, потому что ключи больше?

Если ваш дизайн требует определенной ориентации, вы можете пересмотреть свой дизайн.