当前位置: 首页 > 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*/ 

http://www.lryc.cn/news/398962.html

相关文章:

  • python JSON Lines (JSONL)的保存和读取;jsonl的数据保存和读取,大模型prompt文件保存常用格式
  • Spring Boot中@Async注解的使用及原理 + 常见问题及解决方案
  • ubuntu基于cmakelist的Qt工程,如何将图片打包进二进制程序
  • Spring的启动流程refresh方法、配置类解析流程@Component、@Configuration、@Import、@Bean
  • 运算放大器(2)
  • 智能优化算法之模拟退火算法SA
  • 同时用到,网页,java程序,数据库的web小应用
  • 星环科技推出语料开发工具TCS,重塑语料管理与应用新纪元
  • 【ARM】MDK安装ARM_compiler5无法打开安装程序
  • PHP文字ocr识别接口示例、人工智能的发展
  • 【2024 全国青少年信息素养大赛复赛指南】算法创意实践挑战赛复赛、智能算法应用挑战赛复赛指南
  • 构建自定义Tensorflow镜像时用到的链接地址整理
  • C++——二叉搜索树的实现
  • 【AppScan】安装教程 AppScan v10 Web应用安全测试工具(附安装包)零基础入门到精通,收藏这一篇就够了
  • Java项目:基于SSM框架实现的中小型企业财务管理系统【ssm+B/S架构+源码+数据库+答辩PPT+开题报告+毕业论文】
  • c++ - 多态
  • 亚马逊云科技EC2简明教程
  • TCP网络传输控制协议
  • PCDN技术如何应对网络带宽限制?(壹)
  • Java数据结构-链表与LinkedList
  • 单元测试实施最佳方案(背景、实施、覆盖率统计)
  • mysql笔记(表导出文件,文件导入表)
  • Navicat 17 新特性 | 原生支持 Linux ARM 平台以及银河麒麟和统信操作系统
  • 【pytorch】手写数字识别
  • SpringBoot3.3.0升级方案
  • 用 Kotlin 编写四则运算计算器:从零开始的简单教程
  • java算法day13
  • 方便快捷传文件—搭建rsync文件传输服务器
  • python调用qt编写的dll
  • SCI一区级 | Matlab实现NGO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测