Javascript $（窗口）。在高度/宽度条件下调整大小不正确触发功能

我有一个固定位置的全屏图像库。容器div高度通过jQuery设置，下一个div（#页）的页边距顶部等于window.height

以下是代码：

var windowH = $(window).height();
var windowW = $(window).width();

function marginTop() {
    var currentH = $(window).height();
    $("#page").css("margin-top", currentH +'px');
    $("#image-gallery").css("height", currentH +'px');
    console.log('mTop fired!');
};

$(window).resize(function() {
        var newH = $(window).height();     // Records new windows height after resize
        var newW = $(window).width();
        var maxH = windowH + 90;        // Sets a positive delta of some px
        var maxW = windowW + 60;
        var minH = windowH - 90;      // Sets a negative delta of some px
        var minW = windowW - 60;
            if(newH > maxH) {           // If the height difference is more than 50px, then set new marginTop for #page
                marginTop();
                console.log('fire for bigger height');
            } else if(newH < minH) {
                marginTop();
                console.log('fire for smaller height');
            } else if(newW > maxW) {
                marginTop();
                console.log('fire for bigger width');
            } else if(newW < minW ) {
                marginTop();
                console.log('fire for smaller width');
            }
});

var windowH=$（window.height（）；
var windowW=$（window.width（）；
函数marginTop（）{
var currentH=$（窗口）.height（）；
$（“#page”）.css（“页边距顶部”，当前H+'px'）；
$（“#图像库”）.css（“高度”，当前H+'px'）；
log（'mTop fired！'）；
};
$（窗口）。调整大小（函数（）{
var newH=$（window）.height（）；//在调整大小后记录新窗口的高度
var newW=$（window.width（）；
var maxH=windowH+90；//设置某个px的正增量
var maxW=windowW+60；
var minH=windowH-90；//设置某个px的负增量
var minW=windowW-60；
如果（newH>maxH）{//如果高度差大于50px，则为#页设置新的marginTop
marginTop（）；
控制台。原木（“较大高度的火灾”）；
}否则如果（新建<最小值）{
marginTop（）；
控制台日志（“较小高度火灾”）；
}else if（newW>maxW）{
marginTop（）；
console.log（“较大宽度的火灾”）；
}否则如果（新建<最小值）{
marginTop（）；
控制台。原木（“小宽度火灾”）；
}
});

我将条件分成了几个

else if

语句，因为它工作不正常，我必须检查它何时工作，何时不工作

各种各样的if…elseif…elseif。。。在移动浏览器上解决一个问题：如果没有这个增量，当地址栏出现或消失时，#image gallery div会改变尺寸，从而导致div高度的不连贯调整。此外，我也不想为了桌面上视口的小变化而重新绘制整个内容

但是它有一些问题，因为它不能正常工作。特别是：

• marginTop（）仅对高度较小的window.resize（从console.log检查）激发
• 在桌面上，如果通过右上角的按钮调整窗口的大小，它根本不会启动
• 除去所有if-else-if条件，它在任何情况下都可以在桌面上正常工作（但在移动设备上地址栏仍然是个问题）

无法理解，代码对我来说似乎很好，但对浏览器来说不是。陷阱在哪里

---

在Firefox和Chrome最新版本上进行测试

有人经过，然后对我的问题投了-1票。我只想知道，谁是一颗勇敢的心，能够在不发表简单评论的情况下评判他人。这种行为应该被禁止，我们既不是在开玩笑也不是在开玩笑。

这里有很多小问题。您的if语句将永远不会达到所比较的宽度。首先，当宽度在a

中，如果else

与高度一起，则始终首先计算高度，如果调整高度，则永远不会命中宽度

接下来，您的“当前高度|宽度”如

var windowH=$（window.height（）从不重置。这意味着，如果用户显示的视口（例如浏览器最小化）为200:150，则高度：宽度将始终基于200:150进行测量。这将带来与使用更大视口的人截然不同的体验

另一个问题，通常在窗口重新调整大小时发现，是您的代码将触发的次数的倍数。这可能会导致命令重叠的主要问题，从而导致双重反馈

下面是我将如何处理这个问题和建议的重建


/*获取当前窗口大小作为对象的简单方法，其中h=高度和w=宽度*/
函数getWindowsSize（）{
返回{h:$（window.height（），w:$（window.width（）}；
}
功能定位（典型，msg）{
//向控制台报告更改消息
log（类型=='h'？'HEIGHT:\t'：'WIDTH:\t'，msg）；
//我们真的只需要在高度改变的情况下使用你的方法
if（typ=='h'）marginTop（）；
//进行了更改，现在重置
window.sizeCheck=getWindowsSize（）；
}
//你原来的方法
//经过调解，因此可以独立使用
函数marginTop（）{
var currentH=$（窗口）.height（）；
console.log（'currentH'，currentH）
$（“#page”）.css（“页边距顶部”，当前H+'px'）；
$（“#图像库，#页面”）。高度（当前高度）；
log（'mTop fired！'）；
}
/*窗口大小调整事件的操作区域*/
函数windowResize（）{
//让我的变数又短又甜，
//sch=sizeCheck，scu=sizeCurrent
var sch=window.sizeCheck，//获取以前设置的大小
scu=GetWindowsSize（），
最大值=sch.h+90，
minH=sch.h-90，
最大值=sch.w+60，
minW=sch.w-60；
如果（scu.h>maxH）doWork（'h'，'视图变得更高'）；
否则，如果（scu.hmaxW）doWork（'w'，'视图变宽'）；
否则，如果（scu.w

html，正文{margin:0；padding:0；}
#图像库{
背景：蓝色；
颜色：白色；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
}
#页面{背景：白色；颜色：红色；高度：400px；位置：相对；z索引：1；}
p{padding:3em；te