0

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

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

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

谢谢！

4

3 回答 3

2

调用.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-06T17:55:45.270 回答
0

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

此外，在使用 $(window).resize 时，请确保设置时间延迟以防止多个并发发生，这已被多次介绍：

JavaScript/JQuery: $(window).resize 调整大小完成后如何触发？

jQuery - 如何等待“调整大小”事件的“结束”然后才执行操作？

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

于 2013-03-06T17:58:20.050 回答
0

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

$(function() {
    $(window).resize();
});
于 2013-03-06T17:47:52.077 回答