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

Ответ 1

В браузерах с поддержкой 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. Кроме того, это применит стиль вращения к объекту окна, который я никогда не тестировал и не знаю, работает ли он или нет. Возможно, вам придется применить стиль к элементу документа.

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

Ответ 2

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

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

и

screen.lockOrientation("orientation");

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

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

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

ландшафтно-первичный - Он отображает ориентацию экрана, когда он находится в своем основном ландшафтном режиме. Экран рассматривается в своем основном ландшафтном режиме, если устройство удерживается в нормальном положении, и это положение находится в горизонтальном положении, или если нормальное положение устройства находится в портретной ориентации, а удерживаемое устройство поворачивается на 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

Ответ 3

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

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

а параметр lo использует конкретную таблицу стилей:

<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

Ответ 4

Простой код 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.

Ответ 5

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

var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");

Ответ 6

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

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

Ответ 7

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

http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html http://articles.sitepoint.com/article/iphone-development-12-tips/2