3

您是否必须使用 jquery Mobile 来检测方向更改事件？我有一个简单的网站（不是移动应用程序），只有当 iPad/iPhone/等上的方向发生变化时我才要做一些特定的事情，但我目前没有使用 jQuery Mobile 文件，所以当我测试这个时，它不起作用.

jQuery版本：

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

javascript版本：

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

另外，有没有办法在网络浏览器（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 回答