小程序IOS安全区域优化：safe-area-inset-bottom
ios下边有一个小黑线，位于底部的元素会被黑线阻挡
safe-area-inset-bottom
一 用法及作用：
IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式：
.model{padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
获取高度时，可用
.model{height: calc(100% - constant(safe-area-inset-bottom));height: calc(100% - env(safe-area-inset-bottom));
}
tips:先使用constant 再使用 env
知识点扫盲
下面把相关知识点整理如下：
env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left: 安全区域距离左边界的距离
safe-area-inset-right: 安全区域距离右边界的距离
safe-area-inset-top: 安全区域距离顶部边界的距离
safe-area-inset-bottom: 安全区域距离底部边界的距离
需要的注意一点：H5网页设置 viewport-fit=cover的时候才会生效，小程序里的viewport-fit默认是 cover。
为了更好的理解上文意思，我们来看一下未适配的底部效果：
适配后的效果：
二
相关文章：
小程序IOS安全区域优化：safe-area-inset-bottom
ios下边有一个小黑线，位于底部的元素会被黑线阻挡 safe-area-inset-bottom 一 用法及作用： IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式： .model{padding-bottom: constant(safe-area-ins…...
C++ 中多态性在实际项目中的应用场景
C中的多态性是面向对象编程中的一个核心概念，它允许我们在使用基类指针或引用的情况下，调用派生类对象的特定方法。这种特性在实际项目中有着广泛的应用场景，具体包括但不限于以下几个方面： 1.图形图像处理： 在图形图…...
prettier配置
配置 Prettier 在 VSCode 中自动格式化代码的教程 1. 安装 Prettier VSCode 插件 打开 VSCode。点击左侧活动栏的扩展市场图标（或按 Ctrl+Shift+X）。在搜索栏中输入 Prettier - Code formatter。找到插件并点击 Install 安装它。2. 配置 VSCode 设置 确保 VSCode 配置正确，…...
【基于OpenEuler国产操作系统大数据实验环境搭建】
大数据实验环境搭建 一、实验简介1.1 实验内容1.2 环境及其资源规划 二、实验目的三、实验过程3.1 安装虚拟机软件及操作系统3.2 创建安装目录（在主节点上操作）3.2 安装JDK及基本设置（所有节点都需要操作）3.3 安装Hadoop3.4 安装Z…...
期末软件经济学
文章目录 前言复习策略复习名词解释简答题第一章 ppt后记 前言 最近白天都在忙正事，晚上锻炼一下，然后处理一些杂事，现在是晚上十点多，还有一些时间复习一下期末考试。复习到十一点。 复习策略 感觉比较简单，直接刷…...
滑动窗口算法专题
滑动窗口简介 滑动窗口就是利用单调性，配合同向双指针来优化暴力枚举的一种算法。 该算法主要有四个步骤 1. 先进进窗口 2. 判断条件，后续根据条件来判断是出窗口还是进窗口 3. 出窗口 4.更新结果，更新结果这个步骤是不确定的，…...
基于Java的世界时区自动计算及时间生成方法
目录 前言 一、zoneinfo简介 1、zoneinfo是什么 2、zoneinfo有什么 二、在Java中进行时区转换 1、Java与zoneInfo 2、Java展示zoneInfo实例 3、Java获取时区ID 三、Java通过经纬度获取时区 1、通过经度求解偏移 2、通过偏移量计算时间 3、统一的处理算法 四、总结 …...
Excel + Notepad + CMD 命令行批量修改文件名
注意：该方式为直接修改原文件的文件名，不会生成新文件 新建Excel文件 A列：固定为 renB列：原文件名称C列：修改后保存的名称B列、C列，需要带文件后缀，为txt文件就是.txt结尾，为png图片…...
OpenGL 几何着色器高级应用
几何着色器高级应用 概念回顾 几何着色器（Geometry Shader）是 OpenGL 管线中的可选着色器阶段，位于顶点着色器（Vertex Shader） 和光栅化阶段 之间。 其核心功能是基于输入的图元（如点、线或三角形），生成新的图元，或对输入的图元进行修改。 几何着色器的执行是以图元…...
【Unity基础】Unity 2D实现拖拽功能的10种方法
方法1. 基于 Update 循环的拖拽方法 (DragDrop2D) 代码概述 using System.Collections; using System.Collections.Generic; using UnityEngine;public class DragDrop2D : MonoBehaviour {bool isDraggable;bool isDragging;Collider2D objectCollider;void Start(){objectC…...
duxapp中兼容多端的 BoxShadow 阴影组件
由于RN 安卓端对阴影的支持不太完善，使用这个组件可以实现阴影效果 在RN端是使用 react-native-fast-shadow 实现的 示例 import { BoxShadow, Text } from /duxui<BoxShadow><Text>这是内容</Text> </BoxShadow>Props 继承自Taro的View…...
服务器---centos上安装docker并使用docker配置jenkins
要在 Docker 中安装 Jenkins 并进行管理，可以按照以下步骤操作： 1. 安装 Docker 首先，确保你的系统已经安装了 Docker。如果尚未安装，可以使用以下命令进行安装： 在 CentOS 上安装 Docker sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://…...
Linux系统操作03|chmod、vim
上文： Linux系统操作02|基本命令-CSDN博客 目录 六、chmod：给文件设置权限 1、字母法 2、数字法（用的最多） 七、vim：代码编写和文本编辑 1、启动和退出 1️⃣启动 2️⃣退出 2、vim基本操作 六、chmod&#x…...
数据库同步中间件DBSyncer安装配置及使用
1、介绍 DBSyncer（英[dbsɪŋkɜː]，美[dbsɪŋkɜː 简称dbs）是一款开源的数据同步中间件，提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景。支持上传插件自定义同步转换业务…...
虚幻5描边轮廓材质
很多游戏内都有这种描边效果，挺实用也挺好看的，简单复刻一下 效果演示： Linethickness可以控制轮廓线条的粗细 这样连完，然后放到网格体细节的覆层材质上即可 可以自己更改粗细大小和颜色...
ISP帳戶會記錄什麼資訊？
許多用戶並不知道ISP會記錄有關線上活動的大量資訊。從流覽歷史記錄到數據使用情況，ISP經常收集和保留用戶數據，引發一系列隱私問題。 ISP 記錄哪些數據？ ISP可以根據其隱私政策記錄各種類型的資訊。常見的記錄數據包括： 1.流覽…...
Facebook如何避免因IP变动而封号？实用指南
随着Facebook在个人社交与商业推广中的广泛应用，越来越多的用户面临因“IP变动”而被封号的问题。尤其是跨境电商、广告运营者和多账号管理用户，这种情况可能严重影响正常使用和业务发展。那么，如何避免因IP变动导致的封号问题？本…...
EXCEL数据清洗的几个功能总结备忘
目录 0 参考教材 1 用EXCEL进行数据清洗的几个功能 2 删除重复值： 3 找到缺失值等 4 大小写转换 5 类型转化 6 识别空格 0 参考教材 精通EXCEL数据统计与分析，中国，李宗璋用EXCEL学统计学，日EXCEL统计分析与决策&#x…...
web网页连接MQTT，显示数据与下发控制命令
web网页连接MQTT，显示数据与下发控制命令 零、前言 在完成一些设备作品后，常常会因为没有一个上位机用来实时检测数据和下发命令而苦恼，在上一篇文章中提到了怎么白嫖阿里云服务器，并且在上面搭建了属于自己的web网站。那么现在…...
数据结构day3作业
一、完整功能【顺序表】的创建 【seqList.h】 #ifndef __SEQLIST_H__ #define __SEQLIST_H__#include <stdio.h> #include <string.h> #include <stdlib.h>//宏定义，线性表的最大容量 #define MAX 30//类型重定义，表示要存放数据的类…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
ios苹果系统，js 滑动屏幕、锚定无效
现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。 原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...
 error)
【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error
在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...
【C++】纯虚函数类外可以写实现吗？
1. 答案 先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来，一直在光谱成像领域深度钻研和发展，始终致力于研发高性能、高可靠性的光谱成像相机，为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
CTF show 数学不及格
拿到题目先查一下壳，看一下信息 发现是一个ELF文件，64位的 用IDA Pro 64 打开这个文件 然后点击F5进行伪代码转换 可以看到有五个if判断，第一个argc ! 5这个判断并没有起太大作用，主要是下面四个if判断 根据题目…...