位置: IT常识 - 正文

h5适配ios顶部和底部安全区域的问题(h5适配iphonex)

编辑:rootadmin
h5适配ios顶部和底部安全区域的问题 一. 前言:

推荐整理分享h5适配ios顶部和底部安全区域的问题(h5适配iphonex),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:h5手机端适配,h5适配各种屏幕的方法,h5在安卓和ios的兼容,h5在安卓和ios的兼容,h5的适配,h5适配各种屏幕的方法,h5适配rem,h5适配iphonex,内容如对您有帮助,希望把文章链接给更多的朋友!

苹果手机从iphoneX之后,屏幕顶部都有一个齐刘海,iPhoneX 取消了物理按键,改成底部小黑条,如果不做适配,这些地方就会被遮挡,所以本文记录一下齐刘海与底部小黑条的适配方法。

二. 知识点学习

1)viewport-fit iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

contain: 可视窗口完全包含网页内容cover:网页内容完全覆盖可视窗口auto:默认值,跟 contain 表现一致

注意: 网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。

h5适配ios顶部和底部安全区域的问题(h5适配iphonex)

2)env() 和 constant() iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量(单位是px):如果是微信小程序的话,viewport-fit默认是 cover

safe-area-inset-left:安全区域距离左边边界的距离safe-area-inset-right:安全区域距离右边边界的距离safe-area-inset-top:安全区域距离顶部边界的距离safe-area-inset-bottom:安全区域距离底部边界的距离

注意: 1)当 viewport-fit = contain 时 env() 是不起作用的,必须要配合 viewport-fit = cover 使用。对于不支持env() 的浏览器,浏览器将会忽略它。 需要做向后兼容。 2)env() 跟 constant() 需要同时存在,而且顺序不能换。

//适配底部小黑条.page_bottom { padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */ }三. 适配步骤?1)设置网页在可视窗口的布局方式<meta name='viewport' content="width=device-width, viewport-fit=cover" />2)适配导航栏刘海屏

用的是vant的导航栏组件自带的 safe-area-inset-top 属性,因为van-nav-bar导航栏开启了fixed布局,导致页面下面的所有内容,直接上升到了页面的最顶部,部分内容会被van-nav-bar导航栏遮挡,我没用这个组件自带的placeholder占位,而是在外面又增加了一个class类名为navBarCon的div,给他一个和导航栏一样的高度,设置了 height:50px; 这样就会占位了

//适配导航栏刘海屏,用的是vant的导航栏组件,自带的 safe-area-inset-top 属性<template> <div class="root"> <div class="navBarCon"> <van-nav-bar title="收货地址" left-arrow fixed safe-area-inset-top @click-left="navBack" /> </div> </div></template><script>export default { data () { return {} }, mounted () {}}</script><style lang="scss" scoped>::v-deep { .van-nav-bar .van-icon { color: #333 !important; font-weight: 600; font-size: 20px; } .van-nav-bar__title { color: #333; font-weight: 600; } .van-nav-bar__content { height: 50px; }}.root { height: 100vh; .navBarCon { height: 50px; }}</style>

对于安卓机这里会有个问题,会没有状态栏的一个区域,就是wifi,时间那一栏 (这是个困扰了一段时间的问题),今天解决了来记录下

大体思路: 判断手机系统是否是Andriod,是的话增加一个padding-top的样式作为安卓的头部距离;ios的话还是让他自己适配

// 判断手机系统export const getNavigatorType = () => { let temp = '' var u = navigator.userAgent if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { temp = 'Android' } else { temp = 'ios' } return temp}<script>import { getNavigatorType } from '@/utils/tool.js' mounted () { let navigatorType = getNavigatorType() if (navigatorType === 'Android') { // 获取文档中的第一个class="van-nav-bar"的元素 document.querySelector('.van-nav-bar').style.paddingTop = '20px' } },</script>3)适配底部小黑条 fixed 元素的适配

吸底的情况(bottom=0)

<template> <div class="root"> <div class="page_bottom flexAround"> <div class="amount"> <span>合计:</span> <span class="red">¥</span> <span class="total_money red">{{ total_money }}</span> </div> <div class="payBtn" @click="confirmOrder">提交订单</div> </div> </div></template><script>export default { data () { return {} }, mounted () {}}</script><style lang="scss" scoped>/* 这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。*/.page_bottom { position: fixed; left: 0; right: 0; bottom: 0; height: 45px; /*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效,写一个兜底, 并写在最上面;f12发现css样式如果都给height设置样式,会依次往下,用最底下的一个样式,如果最下面的没失效,依次往上查找,所以兜底的写在最上面 */ height: calc(45px + constant(safe-area-inset-bottom)); /* 直接扩展高度,因为padding-bottom是内边距 */ height: calc(45px + env(safe-area-inset-bottom)); /* 直接扩展高度 */ background: #fff; padding: 0 11px 0 20px; box-sizing: border-box; padding-bottom: constant(safe-area-inset-bottom); /*兼容 iOS<11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2*/}.flexAround { display: flex; justify-content: space-between; align-items: center;}</style>四:结语

为了方便维护使用,可以把顶部导航栏封装成一个子组件,在父组件中调用

推荐 fixed元素的适配 bottom=0和非0的情况 适配底部小黑条 yidongduanh5安全区适配 如何解决移动端的安全区域为0的问题

本文链接地址:https://www.jiuchutong.com/zhishi/283993.html 转载请保留说明!

上一篇:【环境搭建】使用nvm下载node后npm不能使用(hue环境搭建)

下一篇:凤凰城天港国际机场鸟瞰图,亚利桑那 (© Nearmap/Getty Images)(港田路凤凰城)

  • 所得税汇算申报完之后可以修改吗
  • 滞留票有什么影响
  • 税务师厉害吗
  • 报关单保费000/0.1/1
  • 资产处置收益是什么会计科目
  • 小微企业增值税减免政策
  • 修缮服务开票项目一览表
  • 待抵扣税金凭证分录
  • 物流公司进项发票分录
  • 现金支票 差旅费
  • 有限合伙企业分红个人所得税
  • 劳务报酬申报个税后还需要开发票吗
  • 收到小规模企业农产品普票可以抵扣进项税吗?
  • 别人退保证金多久能到账
  • 房地产公司要做数据分析吗
  • 分配结转制造费用会计分录怎么写?
  • 合同副本和正本区别
  • 营改增之前固定资产可以抵扣吗
  • 出售固定资产要交哪些税
  • 印花税按主营业务成本计算吗
  • 免税个体户发票税率多少
  • 税务局怎么知道你的收入
  • 车船税计入什么费用
  • 电子承兑汇票支付信用查询
  • 建筑行业暂估成本的账务处理
  • 第三方派遣劳务不续签补偿金哪边出
  • 门诊医保报销流程详细步骤
  • 哪些企业可以享受加计扣除
  • vue项目中的package.json是( )?
  • 增值税普通发票和电子普通发票的区别
  • 如何设置bios开关机
  • 购买交易性金融资产时,支付的交易费用应计入
  • linux -e -f
  • 关于工程材料的质量控制说法正确的是
  • 电脑取消共享文件夹
  • 单位保洁外包公司收费标准
  • php流程引擎
  • 增值税红字专用发票什么意思
  • kaggle能赚钱吗
  • 4个生活小常识简短
  • 存货损失是指什么
  • thinkphp join
  • 未分配利润与净利润关系
  • 商业模式诠释了一个企业如何赚钱
  • php数据查询
  • 税务退附加税会计分录
  • springmvc的执行流程
  • 印花税需要扣除负数发票吗
  • sqlsever日志在哪儿
  • microsoft SQL server 2008有什么用
  • 小企业会计准则和一般企业会计准则的区别
  • 企业的纳税申报数据来源于
  • 增值税怎么开
  • 进项不能从销项抵扣
  • 分月摊销怎么处理
  • 无法支付其他应付款核销条件
  • 有形资产有哪些科目
  • 发票打印格式调整方法
  • mysql replace正则表达式
  • sql有什么
  • win7关机很慢是什么原因
  • 电脑怎么改xp系统
  • win7无法登录qq
  • ubuntu怎样调出命令行
  • centos屏蔽ip
  • ubuntu系统键盘无用
  • vim中执行shell命令
  • windows 8
  • win7怎么更改用户名和密码
  • linuxat命令的用法
  • 简易bmp图片读取软件
  • Jquery ajax加载等待执行结束再继续执行下面代码操作
  • jquery简单例子
  • js代码测试工具
  • 怎么用python播放音乐
  • 高新技术企业认定
  • 什么叫关联单位
  • 上海川沙十八铺市场
  • 税务局组织收入存在的问题
  • 企业对税务局建议
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设