web-dev-qa-db-ja.com

iOS Safariでの向きの変更を防ぐ

デバイスを回転させたときにiOS用Safariで横向き表示に移行しないようにすることはできますか？

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（）は回転を停止しないようです。

この動作をブロックする方法はありますか？

javascripthtmliossafariorientation
32
Davide Gualano

Mobile Safariで特定の方向を強制する方法はありません。ユーザーがデバイスを回転させると常に自動回転します。

おそらく、サポートされていない向きについて何かを表示して、向きがサポートされておらず、Webアプリを使用するためにデバイスを元に戻す必要があることをユーザーに知らせることができます。

21
BoltClock

Jonathan Snook はこの問題を回避します。彼のスライドでは こちら で、ポートレートにロックする方法を示しています（スライド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でlandscapeでこれを機能させようとしましたが、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;
}

希望する結果に誰かが近づくのに役立つことを願っています...

53
fisherwebdev

この機能を実装するための spec が提案されています。

また、追加情報については this Chromium bug を参照してください（WebKitまたはChromiumで実装されるかどうかはまだ不明です）。

5
Boris Smus

方向の変更が有効になるのを防ぐことはできませんが、他の回答で述べられているように、変更なしをエミュレートできます。

最初にデバイスの向きまたは向きを検出し、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を使用してボディの幅をビューポートの高さに設定し、ボディの高さをビューポートの幅に設定します。そして、私たちがそこにいる間に変換Originを設定しましょう。

@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
Reggie Pinkham

たぶん新しい未来に...

2015年5月に関しては、

それを行う実験的な機能があります。ただし、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");
3
Fabio Nolasco

次の解決策は、2016年6月の時点でiPhone4、5、6、および6+で機能しているようです。

<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
allenhwkim

医療調査のために画面に表示しているデータの一貫したビューを提供する必要がある場合、デバイスの画面の回転は許可されません。ポートレートで動作するようにアプリケーションを設計します。したがって、使用するための最善の解決策は、ブラウザを介して実行できないロックするか、方向が修正されるまでアプリケーションを使用できないことを示すエラー/メッセージを表示することです。

1
Bill Calderwood