Предотвратить изменение ориентации в iOS Safari - PullRequest
Новая
       36

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

32 голосов
/ 14 марта 2011

Можно ли избежать перехода в альбомную ориентацию в 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 () не останавливает вращение.

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

Ответы [ 8 ]

52 голосов
/ 15 августа 2011

Джонатан Снук обходит эту проблему. На своих слайдах здесь он показывает, как (вроде) привязаться к портрету (см. Слайды 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;
}

Я пытался заставить это работать для landscape на 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;
}

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

20 голосов
/ 14 марта 2011

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

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

5 голосов
/ 27 ноября 2016

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

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

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}
5 голосов
/ 05 марта 2012

A spec для реализации этой функциональности было предложено.

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

3 голосов
/ 13 мая 2015

Может быть, в новом будущем ...

По состоянию на май 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");
1 голос
/ 04 июня 2016

Мне кажется, что следующее решение работает на 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>
1 голос
/ 16 мая 2012

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

0 голосов
/ 14 марта 2011

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

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

...