web-dev-qa-db-ja.com

iPhone Webアプリケーションで向きをポートレートモードにロックするにはどうすればよいですか？

IPhone Webアプリケーションを作成していますが、向きをポートレートモードにロックしたいです。これは可能ですか？これを行うためのWebキット拡張機能はありますか？

これは、モバイルSafari用のHTMLおよびJavaScriptで記述されたアプリケーションであり、Objective-Cで記述されたネイティブアプリケーションではないことに注意してください。

orientationiphone
152
Kevin

ビューポートの方向に基づいてCSSスタイルを指定できます。body[orient = "landscape"]またはbody [orient = "portrait"]でブラウザをターゲットにします

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

しかしながら...

この問題に対するAppleのアプローチは、開発者が向きの変更に基づいてCSSを変更できるようにすることですが、向きの変更を完全に防ぐことではありません。私は他の場所で同様の質問を見つけました：

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

69
Scott Fox

これはかなりハッキーなソリューションですが、少なくとも何か（？）です。アイデアは、CSS変換を使用して、ページのコンテンツを準ポートレートモードに回転させることです。始めるためのJavaScript（jQueryで表現）コードは次のとおりです。

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

このコードでは、ページのコンテンツ全体がbody要素内のdiv内にあると想定しています。横長モードでそのdivを90度回転-縦長に戻します。

読者への課題として残したのは、divがその中心点を中心に回転するため、完全に正方形でない限り、おそらく位置を調整する必要があることです。

また、見苦しい視覚的な問題もあります。向きを変更すると、Safariがゆっくりと回転し、トップレベルのdivが90度異なる位置にスナップします。さらに楽しくするために、

body > div { -webkit-transition: all 1s ease-in-out; }

あなたのCSSに。デバイスが回転すると、Safariが回転し、ページのコンテンツが回転します。面白かった！

96
Grumdrig

この答えはまだ可能ではありませんが、「将来の世代」のために投稿しています。いつか、CSS @viewportルールを介してこれを実行できるようになることを願っています。

@viewport {
    orientation: portrait;
}

仕様（処理中）：
https://drafts.c​​sswg.org/css-device-adapt/#orientation-desc

MDN：
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

MDNブラウザーの互換性テーブルと次の記事に基づくと、特定のバージョンのIEおよびOperaでいくつかのサポートがあるようです。
http://menacingcloud.com/?c=cssViewportOrMetaTag

このJS API仕様も関連性があります。
https://w3c.github.io/screen-orientation/

提案された@viewportルールでは可能だったので、orientationタグのビューポート設定でmetaを設定することで可能になると想定していましたが、これまでのところ成功していません。

状況が改善されたら、この回答を更新してください。

35
xdhmoore

次のコードは、html5ゲームで使用されました。

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-Origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-Origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-Origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});
19
Andrei Schneider

Screen.lockOrientation()はこの問題を解決しますが、サポートはその時点では一般的ではありません（2017年4月）：

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

5
TMan

メディアクエリを使用して画面を回転させるこのCSSのみの方法を思いつきました。クエリは画面サイズに基づいています ここで見つけた 。デバイスの幅が480px以上または高さが480px未満であるデバイスはほとんどないため、480pxが適切であると思われました。

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-Origin: left top;
           -moz-transform-Origin: left top;
            -ms-transform-Origin: left top;
             -o-transform-Origin: left top;
                transform-Origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}
5
Bill

携帯電話をポートレートモードに戻すようにユーザーに伝えるというアイデアが気に入っています。ここで言及されているように： http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...しかし、JavaScriptの代わりにCSSを利用しています。

3
escapedcat

たぶん新しい未来では、すぐに使えるようになるでしょう...

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");
2
Fabio Nolasco
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

これ、または同様のCSSソリューションは、それがあなたの目的であれば、少なくともレイアウトを保持します。

ルートソリューションは、デバイスの機能を制限しようとするのではなく、機能を考慮しています。デバイスが適切な制限を許可しない場合、設計が本質的に不完全であるため、単純なハックが最善の策です。シンプルなほど良い。

0
dgoldston

誰かがそれを必要とするならコーヒーで。

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-Origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-Origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-Origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"
0
Philip

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

最初にデバイスの向きまたは向きを検出し、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%);
}
0
Reggie Pinkham

@Grumdrigの答えに触発され、使用された命令の一部が機能しないため、他の人が必要に応じて次のスクリプトをお勧めします。

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });
0
Yazid Erman