在手机上滚动时隐藏的URL栏会"高度超过100%"

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

  }
}

然而,这会产生一个问题,因为在非常顶级的情况下,这个条形电池,wifi,信号信息也会占据屏幕高度,使'100%'和'vh'元素更大一些.

我无法相信我没有发现任何其他问题,因为我认为这是100%/ 100%网站的一个相当常见的问题.

你们知道对此有什么解决方法吗？

Answer 1

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

如果您指的是滚动时自动切换的"iPhone"URL栏,则您将无法隐藏或切换该显示.当您向上滚动时,URL栏会显示...所以是的......这可能意味着当用户向上滚动时,您将有20px左右不可见.但是,它通常不是问题,因为当你向下滚动时,IOS会隐藏那个条...以免影响屏幕视图.这可能无法解答您的问题,但URL栏是我认为您的意思.