safari对100vh的兼容问题[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

代码语言：javascript复制

需求：在以下的布局要求下，利用flex布局来实现，但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度

很自然的利用100vh来控制最外层的高度，但测试过程中，发现safari浏览器中，页面的高度出现了偏差，比屏幕的高度还要高出一部分，出现了双层滚动条。

经研究，发现safari的100vh是包含地址栏和功能列的，而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)

解决方案

通过innerHeight重新定义一个变量代替vh

代码语言：javascript复制

safariHacks() {
    let windowsVH = window.innerHeight / 100;
    document.querySelector('.wrap').style.setProperty('--vh', windowsVH   'px');
    window.addEventListener('resize', function() {
        document.querySelector('.wrap').style.setProperty('--vh', windowsVH   'px');
    });
}

在mounted内调用该方法

代码语言：javascript复制

height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
height: calc(var(--vh, 1vh) * 100);

注意–vh要写在100vh下面。。。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/139676.html原文链接：https://javaforall.cn

https java 网络安全 ios

0 人点赞