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

news/2024/8/27 4:08:33/ 标签: 前端, 性能优化, 兼容性

在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.ppmy.cn/news/1475451.html

相关文章

设置Llinux自带的led功能,在timer模式下设置delay_on后会把delay_off给清0

记录&#xff1a; 内核版本4.9.88. 问题复现方法是&#xff1a; 1. cd /sys/class/leds/cpu //cpu是内核自带led的节点名 2. echo timer > trigger 3. echo 100 > delay_on在设置完delay_on之后&#xff0c;发现delay_off自己设置为0了。同理设置delay_off后&#xff…

无障碍快捷方式图标

问题背景 测试反馈&#xff0c;无障碍快捷方式和setting里的无障碍图标不一致。 无障碍快捷方式悬浮窗 1、悬浮窗在systemui中 frameworks\base\packages\SystemUI\src\com\android\systemui\accessibility\floatingmenu\AccessibilityTargetAdapter.java 图标获取方式&…

C#面:ABP.NEXT 是什么,请阐述 ?

ASP.NET Boilerplate是.Net平台⾮常优秀的⼀个开源Web应⽤程序框架,在国内也有⼤量的粉丝.从名称可以看出来, 这是ASP.NET Boilerplate的下⼀代框架。 ABP框架创作于2013年&#xff0c;那时候没有.Net Core和ASP.NET Core&#xff0c;也没有Angular2 。ABP发布后&#xff0c;它…

01、Kerberos安全认证之原理及搭建命令使用学习笔记

文章目录 前言一、Kerberos原理1.1、数据安全防护&#xff08;kerberos所属的层次&#xff09;1.2、Kerberos介绍1.3、Kerberos名词介绍1.4、Kerberos术语1.5、Kerberos认证流程1.5.1、Kerberos流程图1.5.2、第一次通信&#xff1a;客户端与AS1.5.3、第二次通信&#xff1a;客户…

DNF手游攻略:云手机辅助刷副本!内置辅助工具!

DNF手游是一款备受玩家喜爱的角色扮演类游戏&#xff0c;以其独特的地下城探险和多样化的装备系统而闻名。玩家需要通过不断的挑战和升级&#xff0c;逐步增强自己的角色实力&#xff0c;最终完成各种高难度的副本任务。游戏的核心玩法包括打怪、刷装备、升级技能等。 游戏辅助…

【JavaScript脚本宇宙】提升用户体验:探索 JavaScript 命令行界面开发工具

构建交互式命令行&#xff1a;JavaScript 中的 CLI 开发利器 前言 在现代软件开发中&#xff0c;命令行界面&#xff08;CLI&#xff09;和终端应用程序的开发变得越来越重要。为了提高用户体验和交互性&#xff0c;使用合适的工具和库是至关重要的。本文将介绍一些用于构建命…

基于Python进行分类算法实验(人工智能)的设计与实现

基于Python进行分类算法实验(人工智能)的设计与实现 “Design and Implementation of Python-based Classification Algorithm Experiment in Artificial Intelligence” 完整下载链接:基于Python进行分类算法实验(人工智能)的设计与实现 文章目录 基于Python进行分类算法实验…

数据建设实践之大数据平台(二)安装zookeeper

安装zookeeper 上传安装包到/opt/software目录并解压 [bigdatanode101 software]$ tar -zxvf apache-zookeeper-3.5.7-bin.tar.gz -C /opt/services/ 重命名文件 [bigdatanode101 services]$ mv apache-zookeeper-3.5.7-bin zookeeper-3.5.7 配置环境变量 export JAVA_H…

RabbitMq,通过prefetchCount限制消费并发数

1.问题:项目瓶颈,通过rabbitMq来异步上传图片,由于并发上传的图片过多导致阿里OSS异常, 解决方法:通过prefetchCount限制图片上传OSS的并发数量 2.定义消费者 Component AllArgsConstructor Slf4j public class ReceiveFaceImageEvent {private final UPloadService uploadSe…

ES索引模板

在Elasticsearch中&#xff0c;索引模板&#xff08;Index Templates&#xff09;是用来预定义新创建索引的设置和映射的一种机制。当你创建了一个索引模板&#xff0c;它会包含一系列的默认设置和映射规则&#xff0c;这些规则会在满足一定条件的新索引被创建时自动应用。 索…

使用 Azure DevOps Pipelines 生成 .NET Core WebJob 控制台应用 CI/CD

Web 应用程序通常需要作为后台任务运行的进程&#xff0c;并在特定时间间隔进行计划或在事件中触发。它们不需要花哨的 IO 接口&#xff0c;因为重点是过程而不是输出。Azure WebJobs 提供了出色的支持&#xff0c;通常在云环境中通过 Web 控制台应用程序来实现此目的。WebJob …

基于全国产复旦微JFM7K325T+ARM人工智能数据处理平台

复旦微可以配合的ARM平台有&#xff1a;RK3588/TI AM62X/ NXP IMX.8P/飞腾FT2000等。 产品概述 基于PCIE总线架构的高性能数据预处理FMC载板&#xff0c;板卡采用复旦微的JFM7K325T FPGA作为实时处理器&#xff0c;实现各个接口之间的互联。该板卡可以实现100%国产化。 板卡具…

爬虫怎么实现抓取的

1.4爬虫工程师常用的库通过图1-3我们了解到&#xff0c;爬虫程序的完整链条包括整理需求、分析目标、发出网络请求、文本解析、数据入库和数据出库。其中与代码紧密相关的有&#xff1a;发出网络请求、文本解析、数据入库和数据出库&#xff0c;接下来我们将学习不同阶段中爬虫…

keepalive+nginx/haproxy+keepalive 高可用

keepalive&#xff1a; 调度器的高可用 vip地址在主备之间的切换&#xff0c;主在工作时&#xff0c;vip地址只在主&#xff1b;主停止工作&#xff0c;vip飘到备上。 在主备的优先级不变的情况下&#xff0c;主恢复工作&#xff0c;vip会飘会主服务器 1、配优先级 2、配v…

LLM推理优化笔记1:KV cache、Grouped-query attention等

KV cache 对于decoder-only 模型比如现在如火如荼的大模型&#xff0c;其在生成内容的过程中&#xff0c;为了避免冗余计算&#xff0c;会将Transformer里的self-attention的K和V矩阵给缓存起来&#xff0c;这个过程即为KV cache。 decoder-only模型的生成过程是自回归的&…

c++课后作业

把字符串转换为整数 int main() {char pn[21];cout << "请输入一个由数字组成的字符串&#xff1a; ";cin >> pn;int last 0;int res[10];int j strlen(pn);int idx 2;cout << "请选择&#xff08;2-二进制&#xff0c;10-十进制&#xf…

项目/代码规范与Apifox介绍使用

目录 目录 一、项目规范&#xff1a; &#xff08;一&#xff09;项目结构&#xff1a; &#xff08;二&#xff09;传送的数据对象体 二、代码规范&#xff1a; &#xff08;一&#xff09;数据库命名规范&#xff1a; &#xff08;二&#xff09;注释规范&#xff1a; …

JavaSE 面向对象程序设计进阶 IO流练习 字节缓冲流 字符缓冲流 底层原理

目录 字节缓冲流 字节缓冲流底层原理 字符缓冲流 字节缓冲流 刚刚学习的四个流是基本流 对四个基本流进行封装&#xff0c;添加了新的功能&#xff0c;叫做缓冲流 底层自带长度为8192的缓冲区 import java.io.*;public class Main {public static void main(String[] args) …

xcode中对项目或者文件文件夹重命名操作

提起揭秘答案&#xff1a;选中文件后&#xff0c;按下回车键就可以了 如果在项目中对新建的文件夹或者文件名称不满意或者输入错误了&#xff0c;想要修改一下名称该怎么办&#xff1f;如果是在文件或文件夹上右键是没有rename选项的&#xff1a; 其实想要重命名&#xff0c;很…

红日靶场----(三)1.漏洞利用

上期已经信息收集阶段已经完成&#xff0c;接下来是漏洞利用。 靶场思路 通过信息收集得到两个吧靶场的思路 1、http://192.168.195.33/phpmyadmin/&#xff08;数据库的管理界面&#xff09; root/root 2、http://192.168.195.33/yxcms/index.php?radmin/index/login&am…