地址栏显示且未显示时的全尺寸弹出窗口 - 移动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（点击页脚中的蓝色框。如果地址栏未显示，则黑框不是全屏，但如果显示则全屏显示。）

即使我将无滚动类添加到隐藏溢出的body后，问题仍然存在：

Answer 1

我遇到了完全相同的问题。这是值得关注的。

touch-action：none;要么 touchAction：none;要么 webkit-user-drag：none;

window.innerHeight为您提供窗口的高度。假设560px带有地址栏，当地址栏消失时，它将是620px。因此，当地址栏出现或消失时，高度会发生变化。

在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 })

确保将其设置为被动：false，否则您将收到错误。

如果您的脚本添加了touch-action：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>