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

Question

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

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

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

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

但是当它没有出现时，你可以看到空白：

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

小例子：

https://jsfiddle.net/zzuxvg4p/4/

但是因为 jsfiddle 使用 iframe，你无法在 android 上正确测试它，所以这个页面有来自那个 jsfiddle 的代码：

https://annotated-dev.limebuild.net/media/test.html（点击页脚的蓝色框。如果地址栏没有显示，则黑框不是全屏，如果显示则为全屏）。

即使我将 no-scroll 类添加到 body 并隐藏了溢出，问题仍然存在：

Answer 1

我遇到了完全相同的问题。以下是需要注意的事项。

触摸动作：无；或者 触摸动作：无；或者 webkit-user-drag：无；

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

在您的页面上复制此代码并进行测试。显示的高度应随着地址栏的出现或消失而变化。对我来说，它工作得很好。当打开一个全屏模式（就像你打开的那个）时，一个插件（hammer.js）添加了 touchAction: none;

直到您实际触摸屏幕并在其上拖动手指，功能才会中断。我在右上角有一个关闭按钮来关闭模式。按下它会删除它，因为我没有滑动，所以功能不会中断。

因此，如果模式打开并且您确实添加了 touch-action: none;它不会破裂。您可以关闭它，从而删除样式（假设您有）

$('#your_modal')[0].style = ''; 

这样做会从您的元素中删除触摸动作 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 })

确保它设置为passive: false，否则你会得到一个错误。

如果你有一个添加触摸动作的脚本：none;，只需添加

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

在它初始化之后，它应该可以工作

Answer 2

出于某种原因尝试 window.innerHeight $(window).innerHeight() 在 android 纵向模式下的 resize 事件中返回相同的值。

jQuery 问题 https://github.com/jquery/jquery/pull/764

看起来它不仅仅是 Mobile Safari。

Answer 3

我花了一段时间才弄清楚这一点。从头开始，这是我想出的，在 android 上测试过，它确实禁止隐藏顶部栏：

var resizer = function(){
  $("html, body, #wrapper").css({
    height: $(window).height()
  });
}, openPopup = function(){
   $('.popup').addClass('open');
}, closePopup = function(){
   $('.popup').removeClass('open');
};

$(window).on('load resize',resizer);
$('.trigger').on('click tap', openPopup);
$('.popup').on('click tap', closePopup);

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

body #wrapper {
  overflow-y: auto;
  color: white;
}

body #wrapper div {
  padding: 1rem;
}

.test {
  min-height: 150vh;
  background-color: red;
}

.trigger {
  background-color: blue;
  min-height: 10em;
}

.popup {
  position: fixed;
  width: 100%;
  min-height: 100%;
  bottom: 0;
  background-color: black;
  transform: translateY(100%);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.popup.open {
  transform: translateY(0);
  pointer-events: all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="test"> I'd be the test</div>
  <div class="trigger">I'd open the popup</div>
  <div class="popup">I'd be the popup</div>
</div>