Safari浏览器中工具栏的高度问题

苹果浏览器工具栏是否占html页面高度有以下情况

• 第一种：

使用高度100vh时：100vh=当前视口可见高度 这种情况下工具栏的高度是不包含在100vh里面的，所以设置高度为100vh在苹果浏览器中打开会出现滚动条的问题或者页面被工具栏遮挡，这种是我在移动端开发中比较常用的方式，快捷简单。

• 第二种：

直接设置html,body,div 一级一级的设置高度为：100% 在苹果浏览器中就不会计算其工具栏的高度值。但是这种方式比较麻烦且繁琐

• 第一种情况需要去解决在苹果浏览器中的特殊情况具体解决办法如下：

  解决思路：在使用100vh的情况下，让盒子的高度(100vh)-工具栏的高度（75px）=页面可视区域的高度，给该盒子动态添加一个class类名，然后使用calc去直接计算高度，设置其高度为：calc(100vh - 75px)

判断是否是苹果浏览器：

if(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)){
            localStorage.setItem('isSafari',1)
        }else{
            localStorage.setItem('isSafari',0)
        }

vuex存储判断值

添加class

根据动态添加的calss设置高度