javascript - 网站上的 orientationchange 事件(无移动应用程序)

Question

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

jQuery 版本:

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

javascript 版本:

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

另外，有没有办法在网络浏览器(FF、Safari、Chrome)上模拟方向变化？

Answer 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/