Question

我正在尝试仅在窗口调整大小时增加html元素的高度，但是当窗口未调整大小时脚本会运行。我已经在线查看了多个帖子，并尝试过其他脚本，但似乎没有任何效果。

我将脚本包含在母版页中，因为我希望每个页面都有这种行为。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FuzionLogin.Master.cs" Inherits="Fuzion_Login_V2.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" type="text/css" href="testing.css" />
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <script type="text/javascript">
        $(function () {
            var timer;

            $(window).resize(function () {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    $('html').css("height", "150%");
                });
            }).resize();
        });
    </script>
</head>
<body>

<form id="form1" runat="server">
    <asp:ContentPlaceHolder ID="HeaderHolder" runat="server"></asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="PageInfo" runat="server"></asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</form>

<asp:ContentPlaceHolder ID="FooterContent" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>

Answer 1

这是因为：

}).resize();

这会在DOM ready事件上触发.resize()。因此，您必须将其更改为：

$(function () {
    var timer;
    $(window).resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('html').css("height", "150%");
        });
    }); // <----remove the trigger here.
});

根据您的评论进行一些更改：

$(function () {
    var timer, $win = $(window);
    var win_w = $win.width(); // cache the orig width
    var win_h = $win.height(); // cache the orig height
    $win.resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            if($win.width() === win_w && $win.height() === win_h){ // check if width height are equal to cached ones
              $('html').css("height", "100%");
            }else{
              $('html').css("height", "150%");
            }
        });
    }); // <----remove the trigger here.
});

调整查询大小不按预期工作

1 个答案: