jQuery 方向与 $(window).resize 哎呀

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( 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() 函数只会在加载时触发一次。您需要将其置于 ready 函数之外，并在加载时调用它一次，然后在窗口已重新调整大小时工作。

另外，在使用 $(window).resize 的时候，一定要设置一个时间延迟来防止多个并发发生，这个已经讲过很多次了：

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

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