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

小程序显示兼容处理,home键处理

定义:
env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量,用于获取设备底部和顶部安全区域的大小

示例:

padding-bottom: calc(env(safe-area-inset-bottom) + 12px); /* 兼容iOS>= 11.2 */

安全间距类型:

  1. 屏幕上安全距离: safe-area-inset-top
  2. 屏幕右安全距离: safe-area-inset-right
  3. 屏幕下安全距离: safe-area-inset-bottom
  4. 屏幕左安全距离: safe-area-inset-left

ios11

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

ios11.2+

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容写法(最好)

// 顶部安全距离
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);// 底部安全距离
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

在h5界面如何使用

注: 需在meta标签的content中设置viewport-fit=cover, 安全区域才可生效

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

相关文章:

  • 【java八股文】之JVM基础篇
  • 2024美赛数学建模思路 - 案例:异常检测
  • 【EI会议征稿通知】2024年通信技术与软件工程国际学术会议 (CTSE 2024)
  • Js面试之作用域与闭包
  • Go 爬虫之 colly 从入门到不放弃指南
  • Ceph分布式存储(1)
  • 制造业工厂为什么要实施MES系统呢?
  • Python 一行命令部署http、ftp服务
  • DBA技术栈(三):MySQL 性能影响因素
  • SpringCloud GateWay 在全局过滤器中注入OpenFeign网关后无法启动
  • web前端项目-贪吃蛇小游戏【附源码】
  • ICCV2023 | PTUnifier+:通过Soft Prompts(软提示)统一医学视觉语言预训练
  • 代码随想录 Leetcode459. 重复的子字符串(KMP算法)
  • Rust之构建命令行程序(三):重构改进模块化和错误处理
  • 广和通AI解决方案“智”赋室外机器人迈向新天地!
  • C++I/O流——(4)格式化输入/输出(第二节)
  • 九、K8S-label和label Selector
  • 【.NET Core】 多线程之(Thread)详解
  • 苹果笔记本 macbook 在 office word 中使用 mathtype 的方法
  • 课表排课小程序怎么制作?多少钱?
  • C语言总结十三:程序环境和预处理详细总结
  • tinyxml2
  • What is `@Controller` does?
  • 新版AndroidStudio dependencyResolutionManagement出错
  • 第三天业务题
  • nestjs 装饰器
  • 一款开源且不限制大小可以设置过期时间的支持分享的的开源文件共享系统picoshare 部署教程
  • eBPF运行时安全
  • Linux 系统中常见的命令,它们用于执行各种任务,包括文件和目录管理、系统信息查看、用户管理等
  • AutoEventWireup详解