黑松山资源网 Design By www.paidiu.com
一、media query方式
/*iPhone X 适配*/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bottom{ bottom: 37px; } } /*iPhone XS max 适配*/ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) { .fixed-bottom{ bottom: 37px; } } /*iPhone XR max 适配*/ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) { .fixed-bottom{ bottom: 37px; } }
存在的问题:在微信webveiw内部此方案能在元素底部加上安全区域宽度,没有问题。但是在safari等有底栏的浏览器(页面显示区域已经在安全区内部)也同样会加上安全区宽度。
二、CSS函数
苹果在推出全面屏之后提供的CSS函数,ios<11.2为constant(),ios>11.2为env()。可填入safe-area-inset-top、safe-area-inset-left、safe-area-inset-right、safe-area-inset-bottom对应上下左右的安全区域宽度。env 和 constant 只有在 viewport-fit=cover 时候才能生效。
代码如下:
meta标签加入viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
css写法,不支持env、constant的浏览器会忽略此样式
.fixed-bottom{ bottom: 0; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); }
此方案能解决方案一的问题,且代码更简洁
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年11月13日
2024年11月13日
- 王菲.2000-寓言【EMI百代】【WAV+CUE】
- 群星《妙音纪念珍藏版贰》头版限量编号24K金碟 [低速原抓WAV+CUE][1G]
- 谭咏麟-《20世纪中华歌坛名人百集珍藏版》中唱[APE+CUE][1G]
- 群星《DJ重口味》6N纯银SQCD[WAV+CUE][1.1G]
- 焦丛玲《挪威式的忧伤》[WAV+CUE]
- 余露中国管弦乐作品集锦K2HD》[WAV+CUE]
- 试音宝典《试机四十号K2HD》[低速原抓WAV+CUE]
- 【原神】V5.2攻略 | 暴击爆伤配比 怎样伤害最大化?
- 【原神】V5.2攻略 | 全火元素5星角色·一图流培养
- 【原神】盘点《原神》容易被玩家忽略的大佬角色,很多玩家都不愿意抽他们
- 李玉刚.2017-刚好遇见你【玉泽东方】【WAV+CUE】
- 温拿乐队.1992-永远的记忆【宝丽金】【WAV+CUE】
- 群星.1996-风月电影原声带【滚石】【WAV+CUE】
- Blast Slam S1参赛名单出炉:XG被直邀
- 《英雄联盟》Doinb想让Tian当教练:世纪大和解?