162

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

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

4

13 に答える 13

97

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

于 2010-07-16T04:35:39.563 に答える
71

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

于 2009-07-30T14:37:15.927 に答える
19

次のコードは、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'); 
});
于 2011-12-09T12:17:06.960 に答える
6

メディア クエリを使用して画面を回転させるこの 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
    }
}
于 2014-03-06T11:03:18.953 に答える
5

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

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

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

于 2014-02-08T04:15:27.567 に答える
3

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

于 2013-08-23T10:05:16.017 に答える
2

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

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");
于 2015-05-13T18:39:22.933 に答える
1

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

最初にデバイスの向きまたは向きの変更を検出し、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%);
}
于 2016-12-21T02:05:39.587 に答える
0

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

    $(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)"
于 2014-03-28T17:19:44.240 に答える