jQuery方向与$（窗口）.resize ooops

我想实现以下：我正在工作的网站在横向模式下效果更好。我希望当设备开启纵向时显示一条消息，并且当横向时消息不显示。

我已经写了，准备（）函数中，下面的代码：

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

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

谢谢！

来源

2013-03-06 Boguz Didgeridoo

呼叫.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

来源

2013-03-06 17:55:45 Jai

ahhh，完美！谢谢！ =） – 2013-03-06 17:59:12

当DOM准备就绪时触发你的函数。

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

来源

2013-03-06 17:47:52

我试过了，但即使浏览器处于“风景模式”刷新时，我仍然收到消息... – 2013-03-06 17:55:24

...我还注意到，刷新该功能不起作用。当我点击消息它不隐藏（但它隐藏然后当消息显示在调整浏览器的大小时）... – 2013-03-06 17:57:58

就绪（）函数将只在负载火一次。您需要将这个功能放在就绪功能之外，并在加载时调用它，然后在窗口重新调整大小的情况下工作。

而且，使用$（窗口）.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高度怎么办？除非您也在使用设备检测，否则您的逻辑并不总是成立。

来源

2013-03-06 17:58:20

谢谢。我做了媒体查询，以便网站在纵向和横向模式下都能正常工作。但我仍然希望通知用户该设计在横向上更好。则由用户决定是否继续纵向（单击）以更改为横向（旋转）。但是，谢谢你，这是一个不错的提示... – 2013-03-06 18:03:24

jQuery方向与$（窗口）.resize ooops

回答

相关问题