env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题

这篇具有很好参考价值的文章主要介绍了env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在做微信小程序,有一个功能是提交按钮放在屏幕底部,使用了position:absolute定位,bottom设置为0,正常显示应该是这样的 :

safe-area-inset-bottom,css,前端,javascript

但是自测的时候发现如果在部分ios机型,比如iPhoneX、iPhone12/13的时候,按钮会被ios底部的小黑线所遮挡一部分:

safe-area-inset-bottom,css,前端,javascript

这样显示明显不太友好,因此研究了一下,发现css中有一个特性可以解决iso底部小黑线的问题,即env(safe-area-inset-bottom)。 safe-area,即安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

最开始使用这个属性的时候,我直接给positon:absolute的bottom加了这个属性,但是测试发现给bottom加这个属性虽然可以使底部留下一定的安全距离,但是空出来的部分会透出页面滚动的内容。

safe-area-inset-bottom,css,前端,javascript

此时css代码是这样的:

 position: fixed;left: 0;bottom: env(safe-area-inset-bottom); 

又经过一系列调整发现,把env(safe-area-inset-bottom)这个属性加到height上或者padding上比较合适,效果如下:

safe-area-inset-bottom,css,前端,javascript

此时css代码是这样的:

 position: fixed;left: 0;bottom: 0;padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); 

圆满解决问题!

我尝试了把属性放在height上,也可以解决这个问题,代码如下:

 position: fixed;left: 0;bottom: 0;height:calc(100rpx + env(safe-area-inset-bottom)); 
safe-area-inset-bottom,css,前端,javascriptsafe-area-inset-bottom,css,前端,javascript

最后

对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。
safe-area-inset-bottom,css,前端,javascript
同时每个成长路线对应的板块都有配套的视频提供:
safe-area-inset-bottom,css,前端,javascript
safe-area-inset-bottom,css,前端,javascript
当然除了有配套的视频,同时也为大家整理了各种文档和书籍资料&工具,并且已经帮大家分好类了。
safe-area-inset-bottom,css,前端,javascript
因篇幅有限,仅展示部分资料,有需要的小伙伴,可以【点下方卡片】免费领取:文章来源地址https://www.toymoban.com/news/detail-595989.html

到了这里,关于env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包