当前位置: 首页 > 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能够更有效地利用这…...

Mac Mouse Fix终极指南:让你的第三方鼠标在macOS上焕发新生

Mac Mouse Fix终极指南&#xff1a;让你的第三方鼠标在macOS上焕发新生 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 还在为macOS上第三方鼠标功能受限而…...

libvirt 有哪些命令

除了 virsh 外&#xff0c;还有很多有意思的命令。virt-manager 用于打开 libvirt 交互的界面除了连接本地电脑&#xff0c;也可以访问远程电脑的 libvirtd 服务virt-clone 快速克隆一个虚拟机。在 virt-manager 界面上也集成了这个功能。如下图&#xff0c;就是这么简单快捷&a…...

华硕笔记本CPU过热?G-Helper降压调优终极指南帮你降温10℃

华硕笔记本CPU过热&#xff1f;G-Helper降压调优终极指南帮你降温10℃ 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目…...

重庆银行:万亿新贵的高光与隐忧

对于重庆银行而言&#xff0c;2026年3月24日是一个值得载入史册的日子。就在这一天&#xff0c;该行正式发布了2025年年度报告&#xff0c;其资产规模突破以往周期&#xff0c;使其成功跻身“万亿级城商行俱乐部”。其中&#xff0c;该行的营收与净利润时隔五年再次实现了“双十…...

互联网舆情分析系统:基于Nanbeige 4.1-3B的情感与主题挖掘

互联网舆情分析系统&#xff1a;基于Nanbeige 4.1-3B的情感与主题挖掘 最近几年&#xff0c;大家有没有感觉网上的声音越来越复杂&#xff1f;一个热点出来&#xff0c;瞬间就是成千上万条评论&#xff0c;有支持的&#xff0c;有反对的&#xff0c;有理性分析的&#xff0c;也…...

3个超实用方法:115proxy-for-Kodi插件实现云端视频流畅播放完全指南

3个超实用方法&#xff1a;115proxy-for-Kodi插件实现云端视频流畅播放完全指南 【免费下载链接】115proxy-for-kodi 115原码播放服务Kodi插件 项目地址: https://gitcode.com/gh_mirrors/11/115proxy-for-kodi 你是否曾因115网盘中的高清视频无法在Kodi上流畅播放而困扰…...

从一道CTF赛题出发:手把手教你用火眼取证分析手机APP数据(附雷电模拟器实战)

从一道CTF赛题出发&#xff1a;手把手教你用火眼取证分析手机APP数据&#xff08;附雷电模拟器实战&#xff09; 在网络安全竞赛和电子数据取证领域&#xff0c;手机取证一直是技术含量高且实用性强的核心技能。本文将从一个真实的CTF赛题切入&#xff0c;带您完整走通手机镜像…...

WinForm实战:OxyPlot图表控件鼠标悬停显示坐标值(附完整代码)

WinForm实战&#xff1a;OxyPlot图表控件鼠标悬停显示坐标值&#xff08;附完整代码&#xff09; 在数据可视化应用中&#xff0c;实时交互功能往往能显著提升用户体验。当开发者需要在WinForm平台快速实现专业级图表时&#xff0c;OxyPlot.WindowsForms.Plot控件凭借其轻量级和…...

Rufus终极指南:轻松制作Windows 11启动盘,一键绕过TPM限制

Rufus终极指南&#xff1a;轻松制作Windows 11启动盘&#xff0c;一键绕过TPM限制 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus 还在为Windows 11的TPM 2.0硬件要求而烦恼吗&#xff1f;你的旧…...

ncmdumpGUI+解决网易云音乐NCM文件跨设备播放痛点

ncmdumpGUI解决网易云音乐NCM文件跨设备播放痛点 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 问题场景&#xff1a;被加密的音乐自由 想象这样的场景&…...