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设置高度

Safari浏览器中工具栏的高度问题相关推荐

iphone的Safari浏览器中HTML5上传图片方向问题解决方法
前段时间在上传图片的时候前端使用FileReader将图片读到内存,使用canvas进行压缩,然后上传,在安卓手机上没有问题,但是在iphone的Safari浏览器中一直存在图片方向不正的问题,经过多 ...
在苹果Mac上的Safari浏览器中如何阻止跨站跟踪？
在 Mac 上的 Safari 浏览器中阻止跨站跟踪部分网站使用第三方内容提供商.用户可以让第三方内容提供商停止跨网站跟踪用户以提供产品和服务广告. 1.在 Mac 上的 Safari 浏览器 Ap ...
html table渐变色,Safari浏览器中的渐变问题（给tr添加的渐变效果作用在了td上）...
我想给表格的每一行(tr)增加一个从左到右背景色的渐变, 在谷歌浏览器中显示的是正常的,如下图但是在Safari浏览器中,却是每个单元格(td)都显示了渐变的背景色,如下图代码: tr{ back ...
研究员发现macOS 版本Safari 浏览器中的严重漏洞，获奖10.5万美元
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士安全研究员 Ryan Pickren 在 macOS 版本的 Safari 浏览器中发现了一个漏洞,可被恶意网站用于访问受害者的已登录在线账户甚 ...
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
怎样在iPhone、iPad上的Safari浏览器中快速关闭所有标签页？
Safari 是 iPhone 上使用最广泛的网络浏览器,可以在 iPhone 和 iPad 上的 Safari 中轻松打开额外的标签页,也可以一次关闭所有标签页.如何快速做到这一点,而不必一一关闭它 ...
Mac电脑Safari 浏览器中Cookie 和网站数据如何管理
Safari 浏览器是Mac电脑上自带的一款非常好用的浏览器,如何管理Safari 浏览器中Cookie 和网站数据呢?跟随小编一起来看看吧! 可以更改 Safari 浏览器偏好设置中的选项,从而让 ...
无法在 Safari 浏览器中打开网站如何解决？
无法打开网页.Safari浏览器找不到服务器?相信很多人都有遇到过这样的情况,下面我们来分享无法在 Safari 浏览器中打开网站的解决方法. 1.检查页面无法打开时出现的信息.这可能会建议解决问题的 ...
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
解决ios系统在safari浏览器中添加web应用程序到主屏幕，打开子链接会跳转到safari的问题
解决ios系统在safari浏览器中添加web应用程序到主屏幕,打开子链接会跳转到safari的问题前言 ios系统的safari浏览器有一个功能可以将web应用程序添加到主程序,使得web程序像a ...

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

Safari浏览器中工具栏的高度问题相关推荐

最新文章

热门文章