【发布时间】：2016-12-06 06:40:42
【问题描述】：
我想在不用户改变滚动方向时位置突然改变的情况下显示移动网站。
当移动设备的用户向下和向上滚动时会出现问题。然后由于浏览器显示菜单，视图的高度发生了变化。结果用户立即看到以前的网站的其他片段。
我提供代码示例：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<style>
p { padding-top: 6vh; }
</style>
</head>
<body>
<!-- some paragraphs -->
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas ornare risus a efficitur. Nulla laoreet sagittis magna sed facilisis.</p>
<p> Aliquam nec enim porta, condimentum nibh et, posuere sapien. Sed id consectetur erat. Cras malesuada turpis ut iaculis feugiat. </p>
...
<p>Donec ac enim hendrerit, placerat leo aliquam, mollis mauris. Proin vitae purus ligula. Ut lectus arcu, ullamcorper et feugiat ut, feugiat ut orci. </p>
<p>Phasellus augue eros, vestibulum pharetra tempus id, tristique ullamcorper urna. Donec sed augue commodo, placerat quam a, scelerisque dui.</p>
</section>
</body>
</html>
- 所有代码都可用*
小提琴：
在移动浏览器上测试的带有元标记的版本：
以及失败的解决方案列表：
-
viewport-units-buggyfill- 克隆存储库并启动示例后，vh在底部菜单显示时发生变化。 -
heigth: -webkit-calc(100% - 0px);- 它在移动设备上工作得很好，但在计算机上工作与 vh 完全不同 -
jQuery - second source- 在这种方法中，我必须找到任何使用 vh 单位的具有高度的元素
来源：
有没有什么方法可以在移动设备上应用出色的vh 而不会出现这样的问题？
【问题讨论】：
-
JSFiddle 请。如果您的意思是，在滚动时，通过隐藏浏览器选项卡，带有 vh 或 vw 的元素的大小会发生变化，是的。这通常会发生。回答你的问题：没有。不是我所知道的......不过，请参阅引导程序。
-
JsFiddle 显示简化情况jsfiddle.net/0fgkspyy 所以，我附上链接到真实网站的测试版本，其中问题更大且易于显示test.sekretszczescia.pl
-
如果 jsfiddle 不同，则意味着您没有添加网站使用的所有内容。可以是 CSS、HTML 或 JS。
-
为了清楚起见，我简化了 jsfiddle。在测试网站上有很多元素在“vh”单元中有不同的填充。当页面滚动并且菜单或地址栏显示和隐藏时，我正在寻找在 vh 和像素之间设置恒定比率的方法。
-
所以：1. 将 everything 放入 jsfiddle。 2.删除一些代码，3.如果问题仍然存在并且可以重现，请删除更多（步骤2、3）。 4.直到不是。因此，我们可以查看尽可能少的代码，但仍然可以看到问题所在。请参阅minimal reproducible example 和How to Ask 了解更多信息。