ios x及以上版本H5页面高度100%、100vh自适应滚动条问题

一、问题

在项目实践过程中，会遇到移动端h5页面高度的自适应问题，比如在chrome devtools下的iphonex，默认高度812px，实际高度是852px，倒是在手机端浏览会有滚动条，很烦～

二、方案

height设置 100vh 或者height设置 100% ➕ overflow-y:hidden; 要么会出现滚动条，要么会出现下面出现40px白底

解决方案：在index.html中，meta标签添加 viewport-fit=cover，done～～

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">