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

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

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

ビューポートの方向に基づいて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

これはかなりハックなソリューションですが、少なくとも何か（？）です。このアイデアは、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が回転し、ページのコンテンツが回転します。やばい！

この回答はまだ可能ではありませんが、「未来の世代」向けに投稿しています。うまくいけば、いつかCSSの@viewportルールでこれを実行できるようになります。

@viewport {
    orientation: portrait;
}

こちらが「使用可能」ページです（2019年現在、IEとEdgeのみ）：https :
//caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

仕様（処理中）：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タグのビューポート設定で設定することで可能になると思っていましたが、これまでのところこれで成功していません。

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

次のコードは、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'); 
});

メディアクエリを使用して画面を回転させる、この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
    }
}

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

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

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

私は、ユーザーに自分の電話を縦向きモードに戻すように指示するアイデアが好きです。それがここで言及されているように：http : //tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...しかしJavaScriptの代わりにCSSを利用しています。

たぶん新しい未来には、すぐに使える解決策があるでしょう...

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");

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

まずデバイスの向きまたは向きを検出し、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%);
}

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

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

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

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

    $(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)"

@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);
    });

私は同様の問題を抱えていますが、横向きにするために...以下のコードでうまくいくはずです：

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

クリックしてここに私のウェブサイトからチュートリアルと取り組ん例えば。

実際にPhoneGapを使用している場合を除いて、jQuery Mobileの画面の向きを見るためだけにハックを使用する必要はなく、PhoneGapを使用する必要もありません。

2015年にこれを機能させるには、次のものが必要です。

• コルドバ（4.0より上のすべてのバージョンが優れていますが）
• PhoneGap（PhoneGapも使用でき、プラグインは互換性があります）

そして、Cordovaのバージョンに応じて、これらのプラグインの1つ：

• net.yoik.cordova.plugins.screenorientation（Cordova <4）

Cordovaプラグインはnet.yoik.cordova.plugins.screenorientationを追加します

• cordovaプラグインはcordova-plugin-screen-orientationを追加します（Cordova> = 4）

Cordovaプラグインは、cordova-plugin-screen-orientationを追加します

画面の向きをロックするには、次の関数を使用します。

screen.lockOrientation('landscape');

ロックを解除するには：

screen.unlockOrientation();

可能な向き：

• portrait-primary向きは主縦長モードです。

• portrait-secondary向きは、セカンダリポートレートモードです。

• landscape-primary向きはプライマリランドスケープモードです。

• landscape-secondary向きはセカンダリランドスケープモードです。

• portrait向きは、portrait-primaryまたはportrait-secondary（センサー）のいずれかです。

• 横向きは、横向きプライマリまたは横向きセカンダリ（センサー）のいずれかです。