如何在手机上设置固定基数计算css中的vh单位？

Question

我想在用户改变滚动方向时不突然改变位置的情况下显示手机网站。

移动设备用户向下和向上滚动时出现问题。然后由于浏览器显示菜单而改变了视图的高度。结果用户立即看到之前网站的其他片段。

我给出代码示例：

<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>

所有代码都可用 *

在 fiddle:

http://jsfiddle.net/j2d59xbu

带有要在移动浏览器上测试的元标记的版本：

http://test.sekretszczescia.pl/test.html

以及失败的解决方案列表：

viewport-units-buggyfill - 克隆存储库并启动示例后 vh 在底部菜单显示时更改。
heigth: -webkit-calc(100% - 0px); - 它在手机上工作得很好，但在电脑上工作完全不同于 vh
jQuery - second source - 在这个方法中，我必须找到任何使用 vh unit

来源：

How to fix vh(viewport unit) css in mobile Safari?

有没有什么方法可以在移动设备上应用 vh 而不会出现这样的问题？

Answer 1

最后，我使用 jQuery 修复了 vh 单位，正如来源 2 和那里提到的那样。

CSS: Are view height (vh) and view width (vw) units widely supported?

如何在手机上设置固定基数计算css中的vh单位？

How to set fixed base to calculate vh unit in css on mobile?

css

mobile

view

viewport