3

方向変更イベントを検出するためにjquery Mobileを使用する必要がありますか? 私は単純なサイト (モバイル アプリではない) を持っており、iPad/iPhone/etc で向きが変わった場合にのみ実行する特定のことがありますが、現在 jQuery Mobile ファイルを使用していないため、これをテストすると機能しません。 .

jQuery のバージョン:

$(window).bind('orientationchange',function(e){
      $("#navTempResize").click();
});

JavaScript のバージョン:

window.onorientationchange = function () {
    document.getElementById("navTempResize").click();
}

また、Web ブラウザー (FF、Safari、Chrome) で向きの変更をエミュレートする方法はありますか?

4

1 に答える 1

1

私はこれをテストしていません。時間があれば後でテストします。

Something = function () {
  this.init();
};
Something.prototype = {
  constructor: Something, // <-- fixed constructor

  this.resizeEvent: null,

  init: function () {
    this.resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
    document.body.addEventListener($.proxy(this.resizeEvent, this), this, false);
  },

  handleEvent: function (e) {
    switch(e.type) {
      case this.resizeEvent: this.resize(e); break;
    }
  },

  resize: function(event) {
    var ratio = $(window).width()/$(window).height();
    if (ratio < 1.0) {
      this.portrait();
    } else {
      this.landscape();
    }
  },
  portrait: function () {
    // do something...
  },
  landscape: function () {
    // do something...
  }
};

私は自分の js をこのように整理するのが好きですが、オブジェクトなしでそれを行うこともできます (または、より適切な名前を選択してください:P、私は想像力に欠けています)。したがって、ドキュメントの準備ができている必要があります（そこで行う必要があるのか​​ 、それともどこでもできるのかnew Something()疑問があります）。すべてテストしたら編集します。

- - - - - - 編集 - - - - - - -

CSS3 メディア クエリを使用した別のソリューションを次に示します。

次のように、最大​​幅と最小幅のスマートな選択を使用できます。

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .class1 {
     ...
  }
  .class2 {
     ...
  }
  ...
}

特に iPad の場合、向きと呼ばれるメディア クエリ プロパティもあります。値は、横向き (水平方向) または縦向き (垂直方向) のいずれかです。

@media screen and (orientation: landscape) {
     .iPadLandscape {
       ...
     }
}
@media screen and (orientation: portrait) {
     .iPadPortrait {
       ...
     }
}

詳細については、http: //coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/をご覧ください。

于 2012-05-29T16:27:56.240 に答える