jQuery方向与$（window）.resize ooops

Question

我正在努力实现以下目标：我正在开发的网站在横向模式下工作得更好。 我希望当设备处于开启状态时，会显示一条消息，而当处于启用状态时，则不显示该消息。

我在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();
        });
    }

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

谢谢！

Answer 1

在$(window).resize()之后调用.resize() $(window).resize() ：

$(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

Answer 2

在DOM准备好时触发您的功能。

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

Answer 3

ready（）函数只会在加载时触发一次。 您需要将此功能置于就绪功能之外，并在加载时将其称为ONCE，然后在窗口已重新调整大小时工作。

此外，当使用$（window）.resize时，请确保设置时间延迟以防止多个并发事件，这已被多次覆盖：

JavaScript / JQuery：$（window）.resize如何在调整大小完成后触发？

jQuery - 如何等待'resize'事件的'end'然后再执行一个动作？

不确定您的项目范围是什么，但仅仅根据方向处理项目通常被认为是一种不好的做法; 特别是在你的风景功能（宽度>高度）。 如果页面宽度跨越1280和高度500，该怎么办？ 除非您还使用设备检测，否则您的逻辑将不会始终如此。