朝圣言
扫描关注朝圣言

手机扫描二维码

vue-cli与viewport-units-buggyfill的结合

朝圣言2019-04-01朝圣言 3170 1A+A-

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


vue-cli与viewport-units-buggyfill的结合  前端 web vue 兼容 第1张

难道是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成功解决。


文章关键词
前端
web
vue
兼容
发表评论