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

相关文章:

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

在H5上适配安全区域&#xff1a;采用viewportenvconstant方案。 具体操作如下&#xff1a; 1. 需要将viewport设置为cover&#xff0c;env和constant才能生效。设置代码如下&#xff1a; <meta name"viewport" content"widthdevice-width,initial-scale1.…...

python JSON Lines (JSONL)的保存和读取;jsonl的数据保存和读取,大模型prompt文件保存常用格式

1. JSON Lines (JSONL)文件保存 将一个包含多个字典的列表保存为 JSON Lines (JSONL) 格式的文件&#xff0c;每个字典对应一个 JSONL 文件中的一行。以下是如何实现这一操作的 Python 代码 import json# 定义包含字典的列表 data [{"id": 1, "name": &qu…...

Spring Boot中@Async注解的使用及原理 + 常见问题及解决方案

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…...

ubuntu基于cmakelist的Qt工程,如何将图片打包进二进制程序

qt界面使用的图片打包进入二进制可执行程序&#xff0c;可以避免发布的软件&#xff0c;因为路径问题无法加载图片的问题。 以下步骤参考自百度AI. 步骤如下&#xff1a; 1.创建一个新的Qt资源文件&#xff08;.qrc文件&#xff09; 2.在*.qrc文件中添加图片路径 qrc文件使用…...

Spring的启动流程refresh方法、配置类解析流程@Component、@Configuration、@Import、@Bean

Spring的启动流程概述&#xff1a; 核心方法&#xff1a; refresh方法&#xff0c;作用就是实例化spring容器中的所有单例。 3步&#xff1a; 生成BeanFactory容器&#xff08;有beanDefinition类信息和bean对象实例&#xff09;生成BeanDefinition类信息生成bean对象实例 需…...

运算放大器(2)

&#xff08;1&#xff09;反向放大器 Vout(-R2/R1)*Vi 图一运放的同向端接地0V&#xff0c;反向端和同向端虚短&#xff0c;所以也是0V 反向输入端输入电阻很高&#xff0c;虚断&#xff0c;几乎没有电流注入和流出&#xff0c;那么R1和R2相当于是串联的&#xff0c;流过一个…...

智能优化算法之模拟退火算法SA

发展历史和算法思想 模拟退火算法&#xff08;Simulated Annealing, SA&#xff09;是一种基于热力学原理的随机优化算法&#xff0c;最早由 S. Kirkpatrick, C. D. Gelatt 和 M. P. Vecchi 于 1983 年提出。算法的灵感来自于固体物理学中的退火过程&#xff1a;通过加热和缓慢…...

同时用到,网页,java程序,数据库的web小应用

具体实现功能&#xff1a;通过网页传输添加用户的请求&#xff0c;需要通过JDBC来向 MySql 添加一个用户数据 第一步&#xff0c;部署所有需要用到的工具 IDEA(2021.1),Tomcat(9),谷歌浏览器&#xff0c;MySql,jdk(17) 第二步&#xff0c;创建java项目&#xff0c;提前部署数…...

星环科技推出语料开发工具TCS,重塑语料管理与应用新纪元

5月30-31日&#xff0c;2024向星力未来数据技术峰会期间&#xff0c;星环科技推出一款创新的语料开发工具——星环语料开发工具TCS&#xff08;Transwarp Corpus Studio&#xff09;&#xff0c;旨在通过全面的语料生命周期管理&#xff0c;极大提升语料开发效率&#xff0c;助…...

【ARM】MDK安装ARM_compiler5无法打开安装程序

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 在客户安装了最新版本的MDK5.37及后续更新版本&#xff0c;但原工程使用ARM_Compiler_5.06进行编译和调试&#xff0c;需安装ARM_Compiler_5.06的编译器版本&#xff0c;但在解压缩的过程中后续无法打开ARM_Compiler…...

PHP文字ocr识别接口示例、人工智能的发展

全球在人工智能升级的大背景下&#xff0c;有一定规模的制造商开始大量部署人工智能机器人、系统&#xff0c;以此取代危险、简单和重复性的工作。各种人工智能技术的迅猛发展&#xff0c;正在驱动各行业就业市场发现变革。 京东物流大家并不陌生&#xff0c;京东快递机器人在…...

【2024 全国青少年信息素养大赛复赛指南】算法创意实践挑战赛复赛、智能算法应用挑战赛复赛指南

目录 2024 全国青少年信息素养大赛算法创意实践挑战赛复赛指南 一、比赛内容 二、编程题作答说明 三、准备说明 四、进入复赛 五、设备检测 六、答题与交卷 全国青少年信息素养大赛智能算法应用挑战赛复赛指南 一、 比赛规则: 二、学生具体操作流程 三、 评判方法…...

构建自定义Tensorflow镜像时用到的链接地址整理

NVIDIA相关&#xff1a; NVIDIA CUDA镜像的docker hub&#xff1a;https://hub.docker.com/r/nvidia/cuda/tags?page&page_size&ordering&name12.4.1NVIDIA 构建的Tensorflow镜像包&#xff1a;https://docs.nvidia.com/deeplearning/frameworks/tensorflow-rele…...

C++——二叉搜索树的实现

1、二叉搜索树的概念 二叉搜索树又叫做二叉排序树&#xff0c;他或者是一棵空树&#xff0c;或者具有以下性质&#xff1a; 若他的左子树不为空&#xff0c;则左子树的所有节点的值都小于根节点的值&#xff0c; 若他的右子树不为空&#xff0c;则右子树的所有节点的值都大于…...

【AppScan】安装教程 AppScan v10 Web应用安全测试工具(附安装包)零基础入门到精通,收藏这一篇就够了

获取方式及安装教程下滑至文章底部查看 此软件“仅限学习交流,不能用于商业用途”&#xff0c;如用于商业用途,请到官方购买正版软件,追究法律责任与本平台无关&#xff01; 配置要求 操作系统&#xff1a;64位 Win10、Win8、Win7 软件介绍 IBM AppScan是一款非常好用…...

Java项目:基于SSM框架实现的中小型企业财务管理系统【ssm+B/S架构+源码+数据库+答辩PPT+开题报告+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的中小型企业财务管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单…...

c++ - 多态

文章目录 一、多态的概念二、多态使用三、多态的原理 一、多态的概念 1、概念&#xff1a; 多态就是具有多种形态&#xff0c;可以理解为同一个行为不同对象去完成表现出不同的状态&#xff0c;如&#xff1a; 二、多态使用 1、构成多态的条件 &#xff08;1&#xff09;派…...

亚马逊云科技EC2简明教程

&#x1f4a1; 完全适用于新手操作的Amazon EC2引导教程 简述 在亚马逊云科技中&#xff0c;存在多种计算服务&#xff0c;在此&#xff0c;我们将会着重讨论Amazon EC2(以下简称EC2)&#xff0c;EC2作为亚马逊云科技的明星产品、核心产品&#xff0c;是大多数开发者和企业用…...

TCP网络传输控制协议

目录 什么是TCP TCP的特点 TCP通信步骤 三次握手&#xff08;建立连接&#xff09; 数据传输 四次挥手&#xff08;连接释放&#xff09; 为什么要进行三次握手&#xff1f;两次握手行不行&#xff1f;一次握手行不行&#xff1f; 为什么是四次挥手&#xff1f;三次、两…...

PCDN技术如何应对网络带宽限制?(壹)

PCDN技术应对网络带宽限制的操作主要包括以下几个方面&#xff1a; 利用边缘计算资源&#xff1a;PCDN是以P2PCDN技术为基础&#xff0c;通过挖掘利用边缘网络海量碎片化闲置资源来构建内容分发网络。这意味着&#xff0c;当网络带宽受限时&#xff0c;PCDN能够更有效地利用这…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...