Jquery＆amp; amp;中的纵向和横向模式兼容性HTML5

Question

我正在尝试使我的html页面平板兼容，如果宽度小于高度则尝试隐藏菜单，它在页面加载时有效，但当我更改平板电脑的方向时，菜单div保留在其位置。在这里我试过了

$(document).ready(function () {

    var windowWidth = $(window).width(); //retrieve current window width
    var windowHeight = $(window).height(); //retrieve current window height
    if (windowWidth < windowHeight) {
        $(".menuArea").hide();
    }
    else {

        $(".menuArea").show();
    }
});

Answer 1

您可以使用 orientationchange 事件。

function oChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
  }

  window.addEventListener('orientationchange', oChange);

或通过jquery

 $(window).on('orientationchange', oChange);