Блокировка вращения устройства на мобильных веб-страницах - PullRequest
Новая
       47

Блокировка вращения устройства на мобильных веб-страницах

32 голосов
/ 17 августа 2010

Можно ли обнаружить на моей странице, например, с помощью Javascript, когда пользователь посещает его с помощью мобильного устройства в портретном режиме, и остановить изменение ориентации, когда пользователь поворачивает свой телефон в альбомную ориентацию? На моей странице есть игра, оптимизированная только для портретного отображения, и я не хочу ее в альбомной ориентации.

Ответы [ 7 ]

23 голосов
/ 14 августа 2015

Новые API разрабатываются (и в настоящее время доступны)! 

screen.orientation.lock();   // webkit only

и 

screen.lockOrientation("orientation");

Где "ориентация" может быть любой из следующих:

Portrait-primary - представляет ориентацию экрана, когда он находится в основном режиме портрета.Экран рассматривается в его основном портретном режиме, если устройство удерживается в нормальном положении, а это положение в вертикальной ориентации, или если нормальное положение устройства находится в горизонтальной ориентации, а устройство удерживается повернутым на 90 ° по часовой стрелке.Нормальное положение зависит от устройства.

Portrait-Secondary - представляет ориентацию экрана, когда он находится в режиме вторичного портрета.Экран рассматривается в его дополнительном портретном режиме, если устройство удерживается на 180 ° от его обычного положения, и это положение находится в портретном режиме, или если нормальное положение устройства находится в горизонтальной ориентации, а удерживаемое устройство поворачивается на 90 ° против часовой стрелки.Нормальное положение зависит от устройства.

landscape-primary - представляет ориентацию экрана, когда он находится в основном режиме альбомной ориентации.Экран рассматривается в его основном альбомном режиме, если устройство удерживается в его нормальном положении, и это положение находится в горизонтальном положении, или если нормальное положение устройства находится в портретном режиме, а удерживаемое устройство поворачивается на 90 ° по часовой стрелке.Нормальное положение зависит от устройства.

ландшафтно-вторичный - представляет ориентацию экрана, когда он находится в дополнительном ландшафтном режиме.Экран рассматривается в его дополнительном альбомном режиме, если устройство удерживается на 180 ° от своего нормального положения, и это положение находится в горизонтальной ориентации, или если нормальное положение устройства находится в портретной ориентации, а удерживаемое устройство поворачивается на 90 ° против часовой стрелки.Нормальное положение зависит от устройства.

портрет - представляет как портретно-первичный, так и портретно-вторичный.

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

по умолчанию - Он представляет собой портретно-первичную и альбомно-первичную зависимости от естественной ориентации устройств.Например, если разрешение панели 1280 * 800, по умолчанию оно будет горизонтальным, если разрешение 800 * 1280, по умолчанию оно будет портретным.

Mozilla рекомендует добавить на экран lockOrientationUniversal, чтобы сделать его болеекросс-браузер совместим. 

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

Для получения дополнительной информации перейдите сюда: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

19 голосов
/ 17 августа 2010

В браузерах с поддержкой JavaScript должно быть легко определить, находится ли экран в горизонтальном или портретном режиме, и компенсировать с помощью CSS . Может быть полезно дать пользователям возможность отключить это или хотя бы предупредить их, что вращение устройства не будет работать должным образом.

Редактировать

Самый простой способ определить ориентацию браузера - проверить ширину браузера в зависимости от высоты браузера. Это также имеет то преимущество, что вы будете знать, если игра ведется на устройстве, которое естественно ориентировано в ландшафтном режиме (как некоторые мобильные устройства, такие как PSP). Это имеет больше смысла, чем отключение поворота устройства.

Редактировать 2

Daz показал, как вы можете определить ориентацию устройства, но определение ориентации - это только половина решения. Если вы хотите отменить автоматическое изменение ориентации, вам нужно повернуть все на 90 ° или 270 ° / -90 °, например, 

$(window).bind('orientationchange resize', function(event){
  if (event.orientation) {
    if (event.orientation == 'landscape') {
      if (window.rotation == 90) {
        rotate(this, -90);
      } else {
        rotate(this, 90);
      }
    }
  }
});

function rotate(el, degs) {
  iedegs = degs/90;
  if (iedegs < 0) iedegs += 4;
  transform = 'rotate('+degs+'deg)';
  iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
  styles = {
    transform: transform,
    '-webkit-transform': transform,
    '-moz-transform': transform,
    '-o-transform': transform,
    filter: iefilter,
    '-ms-filter': iefilter
  };
  $(el).css(styles);
}

Примечание: если вы хотите повернуть в IE на произвольный угол (для других целей), вам нужно использовать матричное преобразование, например 

rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
  + "M11 = " + m11 + ", "
  + "M12 = " + m12 + ", "
  + "M21 = " + m21 + ", "
  + "M22 = " + m22 + ", sizingMethod = 'auto expand')";
styles['filter'] = styles['-ms-filter'] = iefilter;

- или используйте Наждачная бумага CSS . Кроме того, это применяет стиль поворота к объекту окна, который я никогда не проверял и не знаю, работает он или нет. Возможно, вам придется применить стиль к элементу документа.

В любом случае, я бы по-прежнему рекомендовал просто отобразить сообщение, в котором пользователь должен играть в игру в портретном режиме.

12 голосов
/ 27 июля 2015

кажется странным, что никто не предложил решение медиа-запроса CSS: 

@media screen and (orientation: portrait) {
  ...
}

и возможность использования определенной таблицы стилей: 

<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation

6 голосов
/ 10 октября 2010

Простой код Javascript для отображения мобильного браузера в книжной или альбомной ориентации.

(Даже если вам придется вводить HTML-код дважды в двух DIV (по одному для каждого режима), возможно, это будет загружаться быстреечем с помощью javascript для изменения таблицы стилей ... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    if(window.orientation==0)
    {
      document.getElementById('portrait').style.display = '';
      document.getElementById('landscape').style.display = 'none';
    }
    else if(window.orientation==90)
    {
      document.getElementById('portrait').style.display = 'none';
      document.getElementById('landscape').style.display = '';
    }
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>

<script type="text/javascript">
if(window.orientation==0)
{
  document.getElementById('portrait').style.display = '';
  document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
  document.getElementById('portrait').style.display = 'none';
  document.getElementById('landscape').style.display = '';
}
</script>
</body>
</html>

Протестировано и работает на Android HTC Sense и Apple iPad.

3 голосов
/ 16 мая 2013

С новыми функциями CSS3 вы можете поворачивать страницу в противоположную ориентацию, в которой они вращались.Извините, нет поддержки IE7.: (. 

var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");
0 голосов
/ 01 сентября 2010

Вы можете обнаружить изменение ориентации, но я не думаю, что вы можете предотвратить это.

0 голосов
/ 17 августа 2010

Вы можете использовать свойства screenSize.width и screenSize.height и определять, когда ширина> высота, а затем обрабатывать эту ситуацию, либо сообщая об этом пользователю, либо соответствующим образом корректируя свой экран.

Но лучше всегоРешение - это то, что @ Doozer1979 говорит ... Почему вы переопределяете то, что предпочитает пользователь?

...