问题

最近再写H5的项目，由于H5的项目以前接触较少，这次也是遇到了一些的问题
我在项目中设置了HTML，body高度100%
然后具体的盒子设置了

width:100vw;
height:100vh;

然后从微信和app中打开是没有问题的，高度可以撑满屏幕，但是通过safari打开的时候，页面的上面被导航栏给遮住了，图片的一部分也展示不出来。
通过查阅资料，我发现，这个问题的原因是CSS在Safari中的解析差异引起的。

具有百分比高度的元素的父级必须具有已定义的高度,并且必须具有height属性.否则,具有百分比高度的元素必须默认为height：auto(内容高度)。
在chrome中自动修正了这个问题，所以在代码的调试阶段没有发现这个问题

解决方案

首先我们需要确认在safari浏览器的时候去修改高度

我们可以用正则去匹配

/Safari/.test(navigator.userAgent)

我们可以通过navigator.userAgent来取得浏览器的userAgent字符串，然后我再chrome中打印了
在chrome中打印
这里竟然也有safari，那我们上面的正则就有问题；

360，QQ等浏览器的userAgent字段也会带有Safari字段，是因为他们基于Chrome二次开发的，所有也会携带有Chrome字段。
所以「匹配规则：拥有Safari字段，并且没有Chrome字段」。

this.isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);

通过这样我们就可以判断出safari浏览器并在这种情况下修改
我们动态的判断并添加类名

  <div class="page" :class="{'isSafari':isSafari}">
  content
   </div>

有两种方案：
1.给body下的每一层级都设置高度100%，这样就不会有问题啦

.bg {
    width: 100vw;
    height: 100vh;
  }
  .isSafari {
    height: 100%;
  }

2.把上面导航栏的高度减去，safari的导航栏高度固定为75px;

height: calc(100vh - 75px);

但是呢，在验证第二种方法的时候有了问题，发现并不能正常显示，然后发现calc的计算属性在低版本的safari中并不兼容。所以如果可以不用兼容safari低版本的情况下还是可以考虑使用第二种方法的。

在我以为问题都解决了的时候，我用我的魅族手机浏览器打开测试了一下，发现这个显示也有问题，而且导航栏的高度还不一样。。。。/(ㄒoㄒ)/~~

兼容适配的路还长，且行且珍惜~

发布了4 篇原创文章 · 获赞 1 · 访问量 153

私信关注