javascript - 在手机上滚动时隐藏 URL 栏困惑 '100% height'

Question

我有以下演示网站:http://woohooo.fortleet.com/

部分内容和导航设置为 100% 高度。当我在我的手机上时，上面有一个 url 栏，当我向上滚动时它会隐藏起来。然而，这种效果会扰乱 100% 的高度，因为它会适应新的浏览器大小，从而产生令人不快的效果。 “vh”和“vw”单位也是如此。

我试过以下方法:

function windowDimensions() {

  if (html.hasClass('touch')) {
    height = window.screen.height;
    width = window.screen.width;
  } else {
    height = win.height();
    width = win.width();
  }

}

function screenFix() {
  if (html.hasClass('touch')) {

    touch = true;
    nav.css({'height' : height + 'px'});
    home.css({'height' : height + 'px'});
    header.css({'height' : height/2 + 'px'});
    content.css({'min-height' : height + 'px'});

  }
}

然而，这会产生一个问题，因为在 VERY TOP 处有一个包含电池、wifi 和信号信息的栏，这些信息也被计入屏幕高度，使“100%”和“vh”元素稍大一些。

我不敢相信我没有发现任何其他关于此的问题，因为我认为这对于 100%/100% 的网站来说是一个非常普遍的问题。

你们知道解决这个问题的方法吗？

Answer 1

您的视口(viewport)元标记似乎没问题。 100vh 不会考虑菜单/wifi/顶栏。它只会提供视口(viewport)高度，不考虑手机上的菜单栏。重要的是要注意 100vh 和 100% 不会是相同的高度。我在移动设备和桌面设备上查看了您的网站，每个部分似乎都是 100vh，没有任何额外的填充(所以它看起来对我来说是正确的)。

如果您指的是在滚动时自动切换进出的“iPhone”URL 栏，那么您将无法隐藏或切换该显示。向上滚动时会显示 URL 栏……所以是的……这可能意味着您将有 20px 左右的空间，当用户向上滚动时将看不到它。但是，这通常不是问题，因为当您向下滚动时，IOS 会隐藏该栏……以免影响屏幕 View 。这可能无法回答您的问题，但我认为 URL 栏就是您的意思。