莉丝前端

因为最初的学习让我对vh和vw这类的单位产生依赖，所以在大部分项目的立项时，使用的是vh和vw的单位，本来用的挺好的。但是因为手上的这个项目是自有项目。为了更好的展示效果，开发到中期，用iphone做测试。也恰恰好因为懒，打开摄像头，扫描二维码，自动唤起safari。于是问题来了，因为我使用的是100%视窗高度，即100vh，居然出现了网页底部的导航被safari底部导航菜单遮住的情况。

难道是100vh不兼容。

在使用csstest测试的时候发现，safari绝对支持vh；

但是对vh的理解是不一样的，safari内高度为80vh。这个在某大型404网站可以搜到，感兴趣的同学想办法科学上网看下。

当然也有对应办法。在404网站内，得知了viewport-units-buggyfill配合hack的方法，他会帮你计算高度，也就是你写的是px，postcss转成vm，渲染的时候根据实际高度转成px。

好！我就用，按照https://github.com/rodneyrehm/viewport-units-buggyfill的写法，如猛虎下山，写上了

const hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
const viewportUnitsBuggyfill = require('viewport-units-buggyfill');
viewportUnitsBuggyfill.init({
    hacks,
});

vue build 打开浏览器。捋了捋还没长出的胡子，emm效果很好。我们点几个看下，我擦！！！！为什么其他页面没效果！！！。

于是在百度和404网站看了下。百度的文章千遍一律，谷歌的内容万中无一～但是依旧没有解决方案。查看插件api

[...]
// update internal declarations cache and recalculate pixel styles
// this is handy when you add styles after .init() was run
viewportUnitsBuggyfill.refresh();
[...]

刷新？新的一个方法出现了。王者一般的写成方法，但是转念一想～后几百个页面的话，那不是每次都要写一次，这不科学的～

那为什么不用vue的生命周期做文章了。

全局路由守卫afterEach不就在进入路由以后发送的事情吗？也不是相当于进入页面之前的吗。

于是

router.afterEach((to, from) => {
    require('viewport-units-buggyfill').refresh();
});

写在入口main.ts里面。

运行完美！！！！

对此，在ios一下100vh大于满屏幕高度的bug成功解决。