Javascript 显示和不显示地址栏时的全尺寸弹出窗口-移动chrome

我的弹出窗口应该是全屏高度减去标题

但是，当地址栏未显示时（向下滚动后），空间将留空

var currencyHeight = $(window).innerHeight() - headerHeight;

$（window）.innerHeight（）在地址栏显示和未显示时都返回559。显示时，弹出窗口工作正常，全屏减去标题：


但当它不显示时，您可以看到空白：


人们通常如何解决这个问题

最小示例：


但是由于JSFIDLE使用iframe，您无法在android上正确测试它，因此此页面包含来自该JSFIDLE的代码：

（单击页脚中的蓝色框。如果地址栏未显示，则黑色框不是全屏，但如果显示，则为全屏）

即使在我将no-scroll类添加到body并隐藏溢出后，问题仍然存在：
出于某种原因尝试window.innerHeight$（window）.innerHeight（）在android纵向模式下返回调整大小时的samevalue事件

Jquery问题

它看起来不仅仅是移动Safari。
出于某种原因尝试window.innerHeight$（window）。innerHeight（）在android纵向模式下返回调整大小时的相同值事件

Jquery问题

看起来不仅仅是移动狩猎。
我花了一些时间才弄明白这一点。从零开始，以下是我的想法，在android上进行了测试，它确实禁止了顶栏的隐藏：


var resizer=function（）{
$（“html，body，#wrapper”）.css({
高度：$（窗口）。高度（）
});
}，openPopup=function（）{
$（'.popup'）.addClass（'open'）；
}，closePopup=function（）{
$（'.popup'）.removeClass（'open'）；
};
$（窗口）.on（'load resize'，resizer）；
$（'.trigger'）。打开（'点击'，打开弹出窗口）；
$（'.popup'）。打开（'点击'，关闭弹出窗口）
正文{
保证金：0；
填充：0；
溢出：隐藏；
}
* {
框大小：边框框；
}
车身包装{
溢出y：自动；
颜色：白色；
}
车身#包装部{
填充：1rem；
}
.测试{
最小高度：150vh；
背景色：红色；
}
.扳机{
背景颜色：蓝色；
最小高度：10em；
}
.弹出窗口{
位置：固定；
宽度：100%；
最小高度：100%；
底部：0；
背景色：黑色；
转化：translateY（100%）；
变换：变换.6s三次贝塞尔（.4,0,2,1）；
指针事件：无；
}
.popup.open{
变换：translateY（0）；
指针事件：全部；
}

我会是测试者
我会打开弹出窗口
我会是弹出窗口
我花了一些时间才弄明白这一点。从零开始，以下是我的想法，在android上进行了测试，它确实禁止了顶栏的隐藏：


var resizer=function（）{
$（“html，body，#wrapper”）.css({
高度：$（窗口）。高度（）
});
}，openPopup=function（）{
$（'.popup'）.addClass（'open'）；
}，closePopup=function（）{
$（'.popup'）.removeClass（'open'）；
};
$（窗口）.on（'load resize'，resizer）；
$（'.trigger'）。打开（'点击'，打开弹出窗口）；
$（'.popup'）。打开（'点击'，关闭弹出窗口）
正文{
保证金：0；
填充：0；
溢出：隐藏；
}
* {
框大小：边框框；
}
车身包装{
溢出y：自动；
颜色：白色；
}
车身#包装部{
填充：1rem；
}
.测试{
最小高度：150vh；
背景色：红色；
}
.扳机{
背景颜色：蓝色；
最小高度：10em；
}
.弹出窗口{
位置：固定；
宽度：100%；
最小高度：100%；
底部：0；
背景色：黑色；
转化：translateY（100%）；
变换：变换.6s三次贝塞尔（.4,0,2,1）；
指针事件：无；
}
.popup.open{
变换：translateY（0）；
指针事件：全部；
}

我会是测试者
我会打开弹出窗口
我会是弹出窗口
我遇到了完全相同的问题。这是需要注意的

触摸动作：无；或
触摸动作：无；或
webkit用户拖动：无

window.innerHeight提供窗口的高度。比如说560像素的地址栏，当地址栏消失时，它将是620像素。因此，当地址栏出现或消失时，高度会发生变化

在Chrome上，在Android（7.0）（我在上面遇到过这个问题）上，它会一直工作，直到发生这种情况：

如果你在某个地方有“touchAction:none”（你确实有），当你用手指在屏幕上拖动时，功能就会中断。我也这么做，我使用hammer.js

当我加载页面时，它工作正常。如果添加侦听器：

$('body').append('<div id="follow" style="position: fixed; width: 100px; height: 30px; top: 10px; left: 10px; color: #FFF;"></div>');
$(window).on('resize', function() {
     $('#follow').text(window.innerHeight());
});

这样做将从元素中删除触摸动作css，window.innerHeight将按预期工作

我知道你在想什么。我将移除它，功能将恢复正常。错误的当您在屏幕上触摸和滑动任何具有触摸操作的div时：无；在刷新页面之前，该功能将永久中断。您可以删除div，添加touch action:element，auto，随便什么，window.innerHeight将保持在您开始刷卡时获得的值

所以，为了解决这个问题，我补充道

window.addEventListener('touchmove', (e) => {

    if (modal_open)
    {
        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();
    }

}, { passive: false })

确保将其设置为被动：false，否则将出现错误

如果有添加触摸动作的脚本：无；，加上

$('#whatever')[0].style['touchAction'] = 'auto';
$('#whatever')[0].style['-webkit-user-drag'] = 'auto';

在它初始化并且应该工作之后，我遇到了完全相同的问题。这是需要注意的

触摸动作：无；或
触摸动作：无；或
webkit用户拖动：无

window.innerHeight提供窗口的高度。比如说560像素的地址栏，当地址栏消失时，它将是620像素。因此，当地址栏出现或消失时，高度会发生变化

在Chrome上，在Android（7.0）（我在上面遇到过这个问题）上，它会一直工作，直到发生这种情况：

如果你在某个地方有“touchAction:none”（你确实有），当你用手指在屏幕上拖动时，功能就会中断。我也这么做，我使用hammer.js

当我加载页面时，它工作正常。如果添加侦听器：

$('body').append('<div id="follow" style="position: fixed; width: 100px; height: 30px; top: 10px; left: 10px; color: #FFF;"></div>');
$(window).on('resize', function() {
     $('#follow').text(window.innerHeight());
});

这样做会从元素中删除触摸动作css，并删除window.innerHeight