带$（窗口）的jQuery方向。调整OOOP的大小

我正在努力实现以下目标： 我正在开发的网站在景观模式下效果更好。 我希望当设备处于纵向时显示消息，而处于横向时不显示消息

我在ready（）函数中编写了以下代码：

    $(window).resize( function(){

    var height = $(window).height();
    var width = $(window).width(); 

    if(width>height) {
        // Landscape
        $("#landscape").css('display','none');
    }   
    else {
        // Portrait
        $("#landscape").css('display','block');
        $("#landscape").click(function(){
            $(this).hide();
        });
    }

但是当页面加载（或者我刷新它）时，它总是显示消息（因为它应该只在纵向模式下）。如果更改浏览器大小，代码将开始工作并相应地显示/隐藏消息。 我怎样才能解决这个问题

---

谢谢

在DOM就绪时触发函数

$(function() {
    $(window).resize();
});

在

$（窗口）之后调用
.resize（）
。resize（）

：

$（窗口）。调整大小（函数（）{
var height=$（window.height（）；
变量宽度=$（窗口）.width（）；
如果（宽度>高度）{
//景观
$（“#景观”）.css（'display'，'none'）；
}否则{
//肖像画
$（“#横向”）.css（'display'，'block'）；
$（“#景观”）。单击（函数（）{
$（this.hide（）；
});
}
}).resize（）；// ready（）函数在加载时只启动一次。您需要在ready函数之外调用它，并在加载时调用它一次，然后在重新调整窗口大小时工作

另外，在使用$（window）.resize时，请确保设置了一个时间延迟以防止多个并发事件发生，这已被多次介绍：



不确定你的项目范围是什么，但仅仅基于方向处理项目通常被认为是一种不好的做法；尤其是在您的景观功能（宽度>高度）。如果一个页面的宽度为1280，高度为500，该怎么办？除非您也在使用设备检测，否则您的逻辑不会始终正确。
我尝试过，但即使刷新时浏览器处于“横向模式”，我仍然会收到消息……而且我还注意到刷新时功能不起作用。当我点击邮件时，它不会隐藏（但当邮件显示在调整浏览器大小时，它会隐藏）…谢谢。我已经做了媒体查询，所以该网站的工作都在纵向和横向模式。但我仍然希望有一条消息告诉用户，设计在景观上更好。然后由用户决定是否继续纵向（单击）或更改为横向（旋转）。但是谢谢你，这是一个很好的建议。。。
$(window).resize( function(){

  var height = $(window).height();
  var width = $(window).width(); 

  if(width>height) {
    // Landscape
    $("#landscape").css('display','none');
  } else {
    // Portrait
    $("#landscape").css('display','block');
    $("#landscape").click(function(){
        $(this).hide();
    });
  }
}).resize(); // <----this way