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

在.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 how to fire AFTER the resize is completed?

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

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

jQuery方向与$（window）.resize ooops

3 个答案: