Question

您是否必须使用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）上模拟方向更改？

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，还有一个名为orientation的媒体查询属性。值可以是横向（水平方向）或纵向（垂直方向）。

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

您可以在此处找到更多信息：http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

网站上的orientationchange事件（没有移动应用程序）

1 个答案: