21

好奇心から、ブラウザの画面サイズを判断するために 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 に慣れていないためです)。オリエンテーション？

4

5 に答える 5

45

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

<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.
于 2010-02-24T02:49:46.350 に答える
22 
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;

  }

});

編集：

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

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

そして、彼の例は、ブラウザー/デバイス間の互換性がより高いです。

Mobile Safari と Chrome は両方とも orientationchange イベントをサポートしているため、これが簡単になります。ただし、回転を度数 (0、90、180、または 270) で報告する window.orientation に頼ることはできません。これは、ポートレート モードで 0° を報告するデバイスもあれば、ランドスケープ モードで 0° を報告するデバイスもあるためです。なんて都合のいい！

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

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 );
于 2012-07-18T14:38:40.597 に答える
3

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

于 2010-02-24T02:45:14.563 に答える
2

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

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;

}

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

于 2013-02-04T15:31:48.113 に答える
1

.height() と .width() を使用してタブレットのクロスプラットフォームに対して同様のアプローチを試み、どちらが大きいかを比較しました。iOS5 (Ipad2 でテスト済み) と BlackBerry Rim では動作しますが、Android (3.2 と 4.0.3) では動作しないようです。Android では、サイトを初めてロードするときに適切な高さと幅が得られますが、画面の向きを変更すると、常に一歩遅れます。
元。寸法 800x1200 を縦モードで使用: h
:1200 w: 800 (縦)
h:1200 w: 800 (横)
h:800 w: 1200 (縦)
h: 1200 w: 800 (横) CSS3 を使用

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

于 2012-02-17T11:35:59.097 に答える