web-dev-qa-db-ja.com

js / jQueryはiPhoneの向きを決定できますか？

好奇心から、ブラウザーの画面サイズを決定するためにjQueryを使用していて、画面サイズを使用して、訪問者がiPhone/iTouchを使用してサイトを表示しているかどうかを判断できることに気付きました。

だから私はこれをテストするために以下を使用しました：

$(document).ready(

    function() {

        var screenX = screen.width,
            screenY = screen.height;

        alert("X: " + screenX + " Y: " + screenY);

        if (screenX == 320 && screenY == 396) {
            $('div#wrap').css('background-color','#f00');
        }

        else if (screenY == 320 && screenX == 396) {
            $('div#wrap').css('background-color','#0f0');
        }
    }
);

IPhoneでページを表示すると、寸法が一貫していることに気づきました（向きに関係なく）。

x：320、y：396

これは、向きに関係なくです。私はまだ、onChangeイベントを使用して変更を検出しようとはしていませんが（主に私はjQueryがまだ新しいので）、jQueryまたはプレーンJavaScriptを介してiPhone/iTouchの向きは？

javascriptjqueryiphoneipod-touch
20
David says reinstate Monica

window.orientation は、回転を示す整数を提供します。本体にイベントを追加することで、向きの変化をリッスンできます。

<body onorientationchange="updateOrientation();">

リンクが停止するか、ある時点で移動する可能性があります。

Value  |  Description
-------+-------------------------------------------------------------------------------
 0     |  Portrait orientation. This is the default value.
-90    |  Landscape orientation with the screen turned clockwise.
 90    |  Landscape orientation with the screen turned counterclockwise.
 180   |  Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone.
45
typeoneerror
jQuery(window).bind('orientationchange', function(e) {

  switch ( window.orientation ) {

    case 0:
        alert('portrait mode');
    break;

    case 90:
        alert('landscape mode screen turned to the left');
    break;

    case -90:
        alert('landscape mode screen turned to the right');
    break;

  }

});

edit：

これはiPhoneでは問題ありませんが、他のデバイスでは正しく機能しない可能性があります。

http://phoboslab.org/log/2012/06/x-type-making-of で見つけた情報をいくつか追加したいと思います。

そして、彼の例は、より多くのブラウザー/デバイスと互換性があります。

モバイルSafariとChrome=はどちらもorientationchangeイベントをサポートしているため、これは簡単です。ただし、度数（0、90、180、または270）で回転を報告するwindow.orientationには依存できません。 、ポートレートモードで0°を報告するデバイスもあれば、ランドスケープモードで0°を報告するデバイスもあります。

解決策は、ウィンドウの高さが幅よりも大きいかどうかを確認することです。そうであれば、明らかに縦長モードになっています！しかし、これは簡単すぎるため、Chromeのブラウザは別の課題を提供します。つまり、orientationchangeイベントが発生した後でのみ、ウィンドウのサイズを更新します。そのため、orientationchangeとリサイズイベントをリッスンします。はぁ。

var wasPortrait = -1;
var checkOrientation = function() {
    var isPortrait = (window.innerHeight > window.innerWidth);
    if( isPortrait === wasPortrait ) { return; // Nothing to do here }
    wasPortrait = isPortrait;

    // Do your stuff...
};
window.addEventListener( 'orientationchange', checkOrientation, false );
window.addEventListener( 'resize', checkOrientation, false );
22
Pawel Dubiel

https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//Apple_ref/doc/uid/TP40006511-SW1の「方向イベントの処理」を参照してください。

3
Randal Schwartz

携帯電話/タブレットのみ

switch ( window.orientation ) {

    case 0:
        alert('portrait mode');
    break;

    case 90:
        alert('landscape mode screen turned to the left');
    break;

    case -90:
        alert('landscape mode screen turned to the right');
    break;

}

これは電話とタブレットでのみ機能します！基本的な向き（ケース0）はタブレットによって異なります。 Samsungケース0は横長、iPadケース0は縦長です。

2
Paulius

.height（）と.width（）を使用して、クロスプラットフォームのタブレットに同様のアプローチを試み、どちらが大きいかを比較しました。 iOS5（Ipad2でテスト済み）とBlackBerry Rimで動作しますが、Android（3.2および4.0.3）では動作しないようです。）Android初回ロード時正しい高さと幅を提供するサイトですが、画面の向きを変更すると、常に1ステップ遅れます。
例ポートレートモードで始まる800x1200の寸法を使用：
h：1200 w：800（縦）
h：1200 w：800（横）
h：800 w：1200（縦）
h：1200 w：800（横長）

CSS3でこのソリューションを試したところ、
CSS3メディアクエリのように条件付きでJavaScriptを使用する方法、向き？
これはおそらくJsソリューションを微調整するよりも優れています。

1
ABBDVD