web-dev-qa-db-ja.com

電話のギャップにおけるjquery mobileによる方向変更イベントの実装

電話のギャップでjquery mobileによる方向変更イベントの正しいコードを誰かに教えてもらえますか？このorientationChange関数をどこでどのように実装しますか？

jqueryjquery-mobilecordova
23
Nishant
$(window).bind('orientationchange', _orientationHandler);

_orientationHandler関数、次のようなものがあります。

if(event.orientation){
      if(event.orientation == 'portrait'){
                  //do something
      }
      else if(event.orientation == 'landscape') {
                    //do something
      }
}
45
ghostCoder
$(window).bind( 'orientationchange', function(e){
    if ($.event.special.orientationchange.orientation() == "portrait") {
        //Do whatever in portrait mode
    } else {
        //Do Whatever in landscape mode
    }
});

IOSをターゲットにしており、orientationchangeが機能しない場合は、バインド関数のイベントパラメーターにサイズ変更イベントを追加できます。方向を変更すると、サイズ変更イベントも発生するため。

12
Ettiene Grobler

次のコードは、すべてのブラウザーで機能し、方向の変更を検出する必要があります。 jqueryモバイルイベントは使用しませんが、ほとんどのデバイスで動作するようです。

1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
2. var ev = isIOS ? 'orientationchange' : 'resize'; 
3. var diff = (window.innerWidth-window.innerHeight);
4. $(window).bind(ev,function(){
5.     setTimeout(function(){
6.         if(diff*((window.innerWidth-window.innerHeight)) < 0)
7.             orientationChanged();
8.     },500);
9. });

サファリ以外のブラウザーでは、行2がサイズ変更イベントを受け取ります。これは、他のデバイスの他のブラウザーが方向変更イベントよりも一貫してサイズ変更イベントを受け取るためです。 http://www.quirksmode.org/m/table.html

いくつかのAndroidネイティブブラウザはすぐに新しい幅を使用しないので、5行目はタイムアウトでチェックを実行します。

6行目方向の変更を行うには、古いものと新しいものの高さと幅の差の積が負である必要があります。

1
agaase

IOS 7 Safariでorientationchangeイベントがトリガーされなかったため、モバイルテンプレートでこれを使用しています。

    // ORIENTATION CHANGE TRICK
    var _orientation = window.matchMedia("(orientation: portrait)");
    _orientation.addListener(function(m) {
        if (m.matches) {
            // Changed to portrait
            $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
        } else {
            // Changed to landscape
            $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
        }
    });
    //  (event is not triggered in some browsers)
    $(window).on('orientationchange', function(e) {
        if (e.orientation) {
            if (e.orientation == 'portrait') {
                $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
            } else if (e.orientation == 'landscape') {
                $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
            }
        }
    }).trigger('orientationchange');
    // END TRICK
0
itsjavi