Javascript Jquery中纵向和横向模式的兼容性&；HTML5

我试图使我的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();
    }
});

$（文档）.ready（函数（）{
var windowWidth=$（window）.width（）；//检索当前窗口宽度
var windowHeight=$（window）.height（）；//检索当前窗口高度
if（窗宽<窗高）{
$（“.menuArea”）.hide（）；
}
否则{
$（“.menuArea”）.show（）；
}
});

您可以使用方向更改事件

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);

---

为什么要使用JavaScript来实现这一点？您可以通过简单的媒体查询来实现它。（当然，改变方向并不会改变显示的内容——您是在DOM就绪时进行测试的，而不是在方向改变时）。