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

Java数据结构-链表与LinkedList

链表 链表的概念 链表是一种物理存储结构上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的引用链接次序实现的。 通俗来说&#xff0c;相比较于顺序表&#xff08;物理上连续&#xff0c;逻辑上也连续&#xff09;&#xff0c;链表物理上不一定连续。 链表是…...

单元测试实施最佳方案(背景、实施、覆盖率统计)

1. 什么是单元测试&#xff1f; 对于很多开发人员来说&#xff0c;单元测试一定不陌生 单元测试是白盒测试的一种形式&#xff0c;它的目标是测试软件的最小单元——函数、方法或类。单元测试的主要目的是验证代码的正确性&#xff0c;以确保每个单元按照预期执行。单元测试通…...

mysql笔记(表导出文件,文件导入表)

遇见权限问题1: cat /etc/my.cnf加入[mysqld] secure_file_priv ""遇见目录错误2:因为 MySQL 服务器没有权限在根目录下创建文件。你可以尝试将文件导出到一个 MySQL 服务器有权限写入的目录下&#xff0c;例如 MySQL 数据目录或 /tmp目录。sudo chmod 755 /path/to…...

Navicat 17 新特性 | 原生支持 Linux ARM 平台以及银河麒麟和统信操作系统

随着 Navicat 17 的发布&#xff0c;引起了业界的广泛共鸣与热烈讨论。此前&#xff0c;我们深入探讨了Navicat 17的多项新特性&#xff0c;涵盖《模型设计&#xff1a;引领创新&#xff0c;优化升级》&#xff0c;《高效的查询与配置》以及《用户界面交互&#xff1a;流畅体验…...

【pytorch】手写数字识别

https://blog.csdn.net/qq_45588019/article/details/120935828 基本均参考该博客 《深度学习原理Pytorch实战》 初步处理 导包 import torch import numpy as np from matplotlib import pyplot as plt from torch.utils.data import DataLoader from torchvision import tr…...

SpringBoot3.3.0升级方案

本文介绍了由SpringBoot2升级到SpringBoot3.3.0升级方案&#xff0c;新版本的升级可以解决旧版本存在的部分漏洞问题。 一、jdk17下载安装 1、下载 官网下载地址 Java Archive Downloads - Java SE 17 Jdk17下载后&#xff0c;可不设置系统变量java_home&#xff0c;仅在id…...

用 Kotlin 编写四则运算计算器:从零开始的简单教程

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…...

java算法day13

java算法day13 104 二叉树的最大深度111 二叉树的最小深度226 翻转二叉树101 对称二叉树100 相同的树 104 二叉树的最大深度 我最开始想到的是用层序遍历。处理每一层然后计数。思路非常的清楚。 迭代法&#xff1a; /*** Definition for a binary tree node.* public class…...

方便快捷传文件—搭建rsync文件传输服务器

比如我们有一个服务器&#xff0c;想把各个机器的文件都通过脚本传给这台机&#xff0c;用sftp或者直接rsync就必须输密码&#xff0c;肯定不行&#xff0c;做等效性免密又麻烦&#xff0c;怎么办呢&#xff0c;这么办&#xff01; 在服务端 yum -y install rsync #编辑&…...

python调用qt编写的dll

报错&#xff1a;FileNotFoundError: Could not find module F:\pythonProject\MINGW\sgp4Lib.dll (or one of its dependencies). Try using the full path with constructor syntax. 只有两种情况&#xff1a; 1.路径不对 2.库的依赖不全 1、如果是使用了qt库的&#xff0…...

企业如何在工商网站上做公示/武汉网站开发公司

a转载于:https://www.cnblogs.com/TsengYuen/archive/2012/04/19/2457394.html...

申请一个自己的网站/石家庄网站建设培训

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产模拟考试一点通&#xff1a;低压电工报名考试考前必练&#xff01;安全生产模拟考试一点通每个月更新低压电工模拟考试题库题目及答案&#xff01;多做几遍&#xff0c;其实通过低压电工作业考试题库很简单。…...

网站建设与准备/做网站推广

前言 这篇文章主要是从pinpoint-web界面入手&#xff0c;我们的目标是弄清楚两个问题&#xff1a; - 1、 pinpoint左侧服务地图上的调用量数据是怎么查询的&#xff1f;- 2、界面查询条件WasOnly是什么意思&#xff1f; 左侧服务地图调用量来源 从下图可以看出&#xff0c;A…...

php网站建设制作设计/优秀网站

STL 基础引入—迭代器一&#xff0c;pair双元组1&#xff0c;构造2&#xff0c;提取值二&#xff0c;map&#xff08;内部有序&#xff09;三、nth_element四&#xff0c;set&#xff08;有序平衡树&#xff09;引入—迭代器 1&#xff0c;.end()返回的不是最后一个元素的位置…...

阿旗建设局举报网站/百度站长平台提交网站

解题来源于蓝桥杯老师 题目要求如上 两种方法一种是用递归&#xff0c;另一种是用algorithm库函数中的全排列函数next_permutation具体代码如下&#xff1a; #include <iostream> #include <algorithm> using namespace std; int a[]{1,2,3,4,5,6,7,8,9}; int c…...

网站建设和管理自查报告/免费域名申请网站

一、输入流与输出流 输入流将数据从文件、标准输入或其他外部输入设备中加载到内存。输出流的作用则刚好相反&#xff0c;即将在内存中的数据保存到文件中&#xff0c;或传输给输出设备。输入流在Java语言中对应于抽象类java.io.InputStream及其子类&#xff0c;输出流对应于抽…...