位置: 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)(港田路凤凰城)

  • oppo蓝牙耳机丢了怎么定位(oppo蓝牙耳机丢了一只怎么找另外一只)

    oppo蓝牙耳机丢了怎么定位(oppo蓝牙耳机丢了一只怎么找另外一只)

  • 电脑微博时间轴在哪里(编辑微博时间)

    电脑微博时间轴在哪里(编辑微博时间)

  • 手机充电慢是怎么回事(手机充电慢是怎么回事华为)

    手机充电慢是怎么回事(手机充电慢是怎么回事华为)

  • 华为p40支持防水吗(华为p40防水级别)

    华为p40支持防水吗(华为p40防水级别)

  • 苹果手机能定位吗(苹果手机能定位vivo手机吗)

    苹果手机能定位吗(苹果手机能定位vivo手机吗)

  • 华为碎屏险怎么买(华为碎屏险怎么退)

    华为碎屏险怎么买(华为碎屏险怎么退)

  • 快手怎么找本地作品集(快手怎么找本地作品视频)

    快手怎么找本地作品集(快手怎么找本地作品视频)

  • 微信的视频号是什么意思(微信的视频号是哪个平台)

    微信的视频号是什么意思(微信的视频号是哪个平台)

  • 格式工厂怎么下载到电脑上(格式工厂怎么下载b站视频)

    格式工厂怎么下载到电脑上(格式工厂怎么下载b站视频)

  • 苹果上面的时间和电池用量怎么没了(苹果上面的时间怎么去掉)

    苹果上面的时间和电池用量怎么没了(苹果上面的时间怎么去掉)

  • 抖音为什么只能发59秒(抖音为什么只能实名认证一个账号)

    抖音为什么只能发59秒(抖音为什么只能实名认证一个账号)

  • ios怎么屏蔽垃圾短信(苹果怎么屏蔽垃圾软件)

    ios怎么屏蔽垃圾短信(苹果怎么屏蔽垃圾软件)

  • ipad怎么设置qq邮件(ipad怎么设置)

    ipad怎么设置qq邮件(ipad怎么设置)

  • ipad怎么查电池损耗(苹果ipad怎么查电池)

    ipad怎么查电池损耗(苹果ipad怎么查电池)

  • 怎么恢复苹果的qq聊天记录(怎么恢复苹果的通讯录)

    怎么恢复苹果的qq聊天记录(怎么恢复苹果的通讯录)

  • ipadmini5电池多大(ipadmini5电池多大容量)

    ipadmini5电池多大(ipadmini5电池多大容量)

  • 谷歌安装器提示无网络(谷歌安装器提示下载好的三件套,怎么才能出现在桌面上)

    谷歌安装器提示无网络(谷歌安装器提示下载好的三件套,怎么才能出现在桌面上)

  • realmex使用技巧(realmex手机)

    realmex使用技巧(realmex手机)

  • 荣耀20pro有nfc功能吗(荣耀20 pro nfc)

    荣耀20pro有nfc功能吗(荣耀20 pro nfc)

  • ps如何存储文件(ps如何存储文件并包含图层)

    ps如何存储文件(ps如何存储文件并包含图层)

  • 铃声多多的视频怎么保存到手机(铃声多多的视频铃声怎么取消)

    铃声多多的视频怎么保存到手机(铃声多多的视频铃声怎么取消)

  • 如何备份电话号码(备份手机电话号码怎么备份)

    如何备份电话号码(备份手机电话号码怎么备份)

  • 腾讯视频的视频怎么下载到本地(如何下载腾讯视频的视频)

    腾讯视频的视频怎么下载到本地(如何下载腾讯视频的视频)

  • 苹果icloud有什么用详细介绍(进入苹果icloud)

    苹果icloud有什么用详细介绍(进入苹果icloud)

  • 福利费的进项税额会计分录
  • 哪些福利费不税前扣除
  • 不需要缴纳税款和服役的是形势户寺观户
  • 捐赠的费用放在什么科目
  • 集团内部借款利息可以税前扣除吗
  • 金蝶专业版二级科目设置
  • 财务利润率
  • 定期定额纳税申报表应税项应填哪个数
  • 外购固定资产的计税基础
  • 商贸企业收到的检测费可以抵扣进项税吗
  • 建设工程中税费如何承担
  • 预收账款在什么科目核算
  • 代付电费开具发票账务处理
  • 融资性售后回租和融资租赁的区别
  • 防暑降温需要缴什么费用
  • 车辆购置税计税价格含增值税吗
  • 存货中的生产成本是指
  • 利息收入是否缴纳印花税
  • 怎么进行现金流量分析
  • 出口退免税资格备案
  • 收取专利使用费怎么支出
  • 利息支出的会计科目
  • windows10显示未激活怎么办
  • 给客户样品需要收钱吗
  • PHP:mb_ereg_search_regs()的用法_mbstring函数
  • 企业自建自用房的规定
  • sudo命令无法执行
  • msxct.exe - msxct是什么进程 有什么用
  • 购买股票的会计分录
  • 库存现金盘盈怎么做分录
  • 法国著名画家塞尚属于什么流派?
  • laravel 使用redis
  • 无形资产入账价值包括资本化支出吗
  • 对个别报表中处置收益的归属期间进行调整
  • 扣缴个人所得税报告表在哪里打印
  • 其他综合收益明细科目
  • 钉钉的组织在线怎么设置
  • 联邦学习(FL)+差分隐私(DP)
  • vue 登陆
  • discuz如何关闭站点
  • 被投资的公司注销后投资公司怎么处理
  • 公司出售房子怎么交税
  • 月末库存商品结转成本怎么算
  • mysql如何判断日期是周末
  • mysql子查询效率如何
  • 织梦系统
  • 劳务报酬所得与个人经营所得的区别
  • 哪些进项税额不得抵扣?
  • 超过规定标准扣几分罚款
  • 增值税在实际计算时采取什么方法
  • 电商刷单返现如何做账务处理合适?
  • 过桥贷款有什么风险
  • 收到了对方的作业怎么办
  • 企业采用公允价值进行会计核算,所体现的会计质量要求
  • 零配件供应是什么意思
  • 个体工商户达到多少缴税
  • 教你怎么使用加油机
  • 数据库连接说明
  • Mac下mysql 5.7.13 安装配置方法图文教程
  • win10服务怎么打开
  • 在unix系统中采用的页面置换
  • u启动如何装系统
  • 恢复注册表的方法
  • win7旗舰版系统怎么样
  • pqhelper.exe是什么进程 pqhelper进程查询
  • win8任务栏图标太大了
  • win7的语言栏不见了
  • windows10的操作中心
  • vc6.0配置opengl设置目录路径
  • jquery的使用
  • img可以设置的属性
  • nodejs 爬虫
  • 批处理 leq
  • nodejs来一打c++扩展
  • js面向对象的三大特性
  • 查看项目层级结构怎么查
  • 中国税收居民申报
  • 什么叫税务协查
  • 无锡市社保局电话是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设