当前位置: 首页 > news >正文

兼容问题---ios底部的安全距离css设置

在H5上适配安全区域:采用viewport+env+constant方案。

具体操作如下:

1. 需要将viewport设置为cover,env和constant才能生效。设置代码如下:

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

2. 同时设置env和constant代码,同样env()和constant()需要同时存在,而且顺序不能换。

这里不一定用padding-bottom可以是margin-bottom设置,具体看实际情况!

@supports
(bottom: constant(safe-area-inset-bottom))
or (bottom: env(safe-area-inset-bottom)) {
.盒容器类名 {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

3. 注意事项:

有一点要注意,在IOS11.2系统以前,可以使用constant()函数,但是在IOS11.2系统以后,这个函数就被废弃了,被env()函数替代了。

所以我们在做屏幕适配时,需要这样写:

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ 

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • C++进阶(while循环——函数应用)
  • 通过vm可以访问那些属性——06
  • 整洁架构SOLID-接口隔离原则(ISP)
  • WSGI 服务器教程:`full_dispatch_request` 方法解析
  • Flutter框架时间线梳理
  • 同三维T80004EA编解码器视频使用操作说明书:高清HDMI编解码器,高清SDI编解码器,4K超清HDMI编解码器,双路4K超高清编解码器
  • SpringBoot整合Java Mail实现发送邮件
  • Study--Oracle-07-ASM自动存储管理(一)
  • GLM3源码学习
  • 《斯科特·凯尔比的风光摄影手册》读书笔记
  • 刷题之单词规律同构字符串(leetcode)
  • 2022-10-26 Qt6.5版本后视频渲染
  • Go 初始化一个字典value是列表
  • 前端/python脚本/转换-使用天地图下载的geojson(echarts4+如果直接使用会导致坐标和其他信息不全)
  • MongoDB - 查询操作符:比较查询、逻辑查询、元素查询、数组查询
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • [LeetCode] Wiggle Sort
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • Angularjs之国际化
  • echarts的各种常用效果展示
  • HTTP那些事
  • JDK9: 集成 Jshell 和 Maven 项目.
  • linux安装openssl、swoole等扩展的具体步骤
  • Node + FFmpeg 实现Canvas动画导出视频
  • PAT A1120
  • SAP云平台里Global Account和Sub Account的关系
  • SQLServer之索引简介
  • vue中实现单选
  • webpack4 一点通
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 复杂数据处理
  • 名企6年Java程序员的工作总结,写给在迷茫中的你!
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • ​LeetCode解法汇总518. 零钱兑换 II
  • !!Dom4j 学习笔记
  • #stm32整理(一)flash读写
  • (17)Hive ——MR任务的map与reduce个数由什么决定?
  • (24)(24.1) FPV和仿真的机载OSD(三)
  • (二)Linux——Linux常用指令
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (计算机网络)物理层
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (学习日记)2024.01.19
  • (源码分析)springsecurity认证授权
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .cfg\.dat\.mak(持续补充)
  • .net core 管理用户机密
  • .net core 使用js,.net core 使用javascript,在.net core项目中怎么使用javascript
  • .net core控制台应用程序初识
  • .Net OpenCVSharp生成灰度图和二值图
  • .net中生成excel后调整宽度
  • .考试倒计时43天!来提分啦!
  • @angular/cli项目构建--Dynamic.Form