Question

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

内容和导航设置为100％高度。当我在手机上时，当我向上滚动时，顶部的这个网址会隐藏起来。但是，这种效果会影响100％的高度，因为它会调整到新的浏览器大小，从而产生令人不快的效果。同样适用于＆＃39; vh＆＃39;和＆＃39; vw＆＃39;单元。

我尝试过以下方法：

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

  }
}

然而，这会产生一个问题，因为在非常顶级的地方，这个酒吧有电池，无线网络，信号信息也会占据屏幕高度，这使得百分之百＆＃39; 100％＆＃39 ;和＆＃39; vh＆＃39;元素有点大。

我无法相信我没有找到任何其他问题，因为我认为这是100％/ 100％网站的常见问题。

你们知道对此有任何解决方法吗？

Answer 1

您的视口元标记似乎很好。 100vh不会考虑菜单/ wifi /顶部栏。它只会提供视口高度，而不考虑手机上的菜单栏。值得注意的是，100vh和100％的高度不一样。我在移动设备和桌面上查看了您的网站，每个部分看起来都是100vh，没有任何额外的填充（所以它看起来对我来说是正确的）。

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

Answer 2

听起来好像您的视口设置不正确。我很确定它不应该考虑额外的10到20个像素。

如果您还没有，请尝试设置视口port并禁用所有缩放选项。希望这会有所帮助：）

参考：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

在手机上滚动时，网页栏隐藏了100％高度＆＃39;向上

2 个答案: