IOS系统safari浏览器,上拉加载列表使用vh计算高度布局的问题

IOS系统safari浏览器,上拉加载列表使用vh计算高度布局的问题
ios系统中在safari浏览器中查看上拉加载列表时,如果使用的100vh对高度做处理,在存在浏览器工具栏的情况下,会出现少部分遮挡,因为safari中的高度包含了工具栏。这时如果想计算出正确的高度,可以用innerHeight做处理(innerHeight可以在safari中获取到除去工具栏的页面高度),并且监听浏览器工具栏变化,因为隐藏/显示工具栏会触发resize事件,在resize时应重新获取innerHeight进行计算。
在这里插入图片描述
但注意处理后在IOS15版本中,safari浏览器展示上拉加载列表时在显示浏览器工具栏的情况下正常,但隐藏工具栏的情况下高度仍然不正常,所以暂不考虑ios15隐藏工具栏情况下的高度自适应(配合ios排查过,应该是safari浏览器在隐藏工具栏的情况下,自身高度识别处理有问题,现阶段暂时无法处理)。
下图中这个window.innerHeight-50px,在具体处理时请根据自己的布局需要判断是否需要减去50或者是其他大小的px。这个scrollerHeight就算用于替代之前用vh计算的高度。另外安卓不管用innerHeight还是vh计算都是不会包括工具栏高度的。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值