javascript - Jquery 和 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);