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

Question

iPhone Web アプリケーションを構築しているのですが、方向を縦モードにロックしたいと考えています。これは可能ですか？これを行うための Web キット拡張機能はありますか?

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

Answer 1

ビューポートの向きに基づいてCSSスタイルを指定できます。 body [orient = <！> quot; landscape <！> quot;]またはbody [orient = <！> quot; portrait <！> quot;]

でブラウザをターゲットにします

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

Answer 2

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

Answer 3

この答えはまだありませんが、「将来の世代」のために投稿します。いつか 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 タグを付けましたが、これまでのところ成功していません。

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

Answer 4

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

Answer 5

メディアクエリを使用して画面を回転させるこのCSSのみの方法を思いつきました。クエリは、ここで見つけた画面サイズに基づいています。 480ピクセル以上または480ピクセル以下の高さのデバイスはほとんどないため、480ピクセルは良いように見えました。

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

Answer 6

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

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

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

Answer 7

携帯電話をポートレートモードに戻すようにユーザーに伝えるというアイデアが気に入っています。 ここで言及されているように：

新しい未来に、すぐに使えるソリューションが追加されるかもしれません...

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

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

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

最初にデバイスの向きまたは向きを検出し、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を使用してボディの幅をビューポートの高さに設定し、ボディの高さをビューポートの幅に設定します。そして、<！>＃8217;変換の原点を設定して、<！>＃8217;再実行します。

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

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

チュートリアルと作業については、こちらをクリックしてください私のウェブサイトからの例。

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

2015年にこの作業を行うには、次が必要です。

• Cordova（どのバージョンでも4.0より上が良い）
• PhoneGap（PhoneGapを使用することもできます。プラグインは互換性があります）

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

• net.yoik.cordova.plugins.screenorientation（Cordova <！> lt; 4）

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

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

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

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

screen.lockOrientation('landscape');

ロックを解除するには：

screen.unlockOrientation();

可能な向き：

• portrait-primary 向きはプライマリポートレートモードです。

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

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

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

• portrait 向きは、縦一次または縦二次（センサー）のいずれかです。

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

Answer 8

Answer 9

Answer 10

Answer 11

新しい未来に、すぐに使えるソリューションが追加されるかもしれません...

2015年5月の場合

それを行う実験的な機能があります。

ただし、Firefox 18以降、IE11以降、Chrome 38以降でのみ動作します。

ただし、まだOperaまたはSafariでは動作しません。

Answer 12

Answer 13

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

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

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

Answer 14

コーヒーが必要な場合。

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

Answer 15

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

最初にデバイスの向きまたは向きを検出し、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を使用してボディの幅をビューポートの高さに設定し、ボディの高さをビューポートの幅に設定します。そして、<！>＃8217;変換の原点を設定して、<！>＃8217;再実行します。

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

Answer 16

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

Answer 17

チュートリアルと作業については、こちらをクリックしてください私のウェブサイトからの例。

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

2015年にこの作業を行うには、次が必要です。

• Cordova（どのバージョンでも4.0より上が良い）
• PhoneGap（PhoneGapを使用することもできます。プラグインは互換性があります）

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

• net.yoik.cordova.plugins.screenorientation（Cordova <！> lt; 4）

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

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

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

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

screen.lockOrientation('landscape');

ロックを解除するには：

screen.unlockOrientation();

可能な向き：

• portrait-primary 向きはプライマリポートレートモードです。

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

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

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

• portrait 向きは、縦一次または縦二次（センサー）のいずれかです。

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