当前位置： 首页 > news >正文

小程序IOS安全区域优化：safe-area-inset-bottom

news 2026/5/15 8:25:23

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下边有一个小黑线&#xff0c;位于底部的元素会被黑线阻挡 safe-area-inset-bottom 一 用法及作用&#xff1a; IOS全面屏底部有小黑线&#xff0c;位于底部的元素会被黑线阻挡&#xff0c;可以使用以下样式&#xff1a; .model{padding-bottom: constant(safe-area-ins…...

编程日记 2024/12/14 9:01:18

C++ 中多态性在实际项目中的应用场景

C中的多态性是面向对象编程中的一个核心概念&#xff0c;它允许我们在使用基类指针或引用的情况下&#xff0c;调用派生类对象的特定方法。这种特性在实际项目中有着广泛的应用场景&#xff0c;具体包括但不限于以下几个方面&#xff1a; 1.图形图像处理&#xff1a; 在图形图…...

编程日记 2024/12/14 8:57:15

prettier配置

配置 Prettier 在 VSCode 中自动格式化代码的教程 1. 安装 Prettier VSCode 插件 打开 VSCode。点击左侧活动栏的扩展市场图标（或按 Ctrl+Shift+X）。在搜索栏中输入 Prettier - Code formatter。找到插件并点击 Install 安装它。2. 配置 VSCode 设置 确保 VSCode 配置正确，…...

编程日记 2024/12/14 8:54:12

【基于OpenEuler国产操作系统大数据实验环境搭建】

大数据实验环境搭建 一、实验简介1.1 实验内容1.2 环境及其资源规划 二、实验目的三、实验过程3.1 安装虚拟机软件及操作系统3.2 创建安装目录&#xff08;在主节点上操作&#xff09;3.2 安装JDK及基本设置&#xff08;所有节点都需要操作&#xff09;3.3 安装Hadoop3.4 安装Z…...

编程日记 2024/12/14 8:50:08

期末软件经济学

文章目录 前言复习策略复习名词解释简答题第一章 ppt后记 前言 最近白天都在忙正事&#xff0c;晚上锻炼一下&#xff0c;然后处理一些杂事&#xff0c;现在是晚上十点多&#xff0c;还有一些时间复习一下期末考试。复习到十一点。 复习策略 感觉比较简单&#xff0c;直接刷…...

编程日记 2024/12/14 8:47:04

滑动窗口算法专题

滑动窗口简介 滑动窗口就是利用单调性&#xff0c;配合同向双指针来优化暴力枚举的一种算法。 该算法主要有四个步骤 1. 先进进窗口 2. 判断条件&#xff0c;后续根据条件来判断是出窗口还是进窗口 3. 出窗口 4.更新结果&#xff0c;更新结果这个步骤是不确定的&#xff0c…...

编程日记 2024/12/14 8:45:02

基于Java的世界时区自动计算及时间生成方法

目录 前言 一、zoneinfo简介 1、zoneinfo是什么 2、zoneinfo有什么 二、在Java中进行时区转换 1、Java与zoneInfo 2、Java展示zoneInfo实例 3、Java获取时区ID 三、Java通过经纬度获取时区 1、通过经度求解偏移 2、通过偏移量计算时间 3、统一的处理算法 四、总结 …...

编程日记 2024/12/14 8:44:01

Excel + Notepad + CMD 命令行批量修改文件名

注意&#xff1a;该方式为直接修改原文件的文件名&#xff0c;不会生成新文件 新建Excel文件 A列&#xff1a;固定为 renB列&#xff1a;原文件名称C列&#xff1a;修改后保存的名称B列、C列&#xff0c;需要带文件后缀&#xff0c;为txt文件就是.txt结尾&#xff0c;为png图片…...

编程日记 2024/12/14 8:42:59

OpenGL 几何着色器高级应用

几何着色器高级应用 概念回顾 几何着色器（Geometry Shader）是 OpenGL 管线中的可选着色器阶段，位于顶点着色器（Vertex Shader） 和光栅化阶段 之间。 其核心功能是基于输入的图元（如点、线或三角形），生成新的图元，或对输入的图元进行修改。 几何着色器的执行是以图元…...

编程日记 2024/12/14 8:39:57

【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…...

编程日记 2024/12/14 8:37:55

duxapp中兼容多端的 BoxShadow 阴影组件

由于RN 安卓端对阴影的支持不太完善&#xff0c;使用这个组件可以实现阴影效果 在RN端是使用 react-native-fast-shadow 实现的 示例 import { BoxShadow, Text } from /duxui<BoxShadow><Text>这是内容</Text> </BoxShadow>Props 继承自Taro的View…...

编程日记 2024/12/14 8:36:54

服务器---centos上安装docker并使用docker配置jenkins

要在 Docker 中安装 Jenkins 并进行管理，可以按照以下步骤操作： 1. 安装 Docker 首先，确保你的系统已经安装了 Docker。如果尚未安装，可以使用以下命令进行安装： 在 CentOS 上安装 Docker sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://…...

编程日记 2024/12/14 8:35:52

Linux系统操作03|chmod、vim

上文&#xff1a; Linux系统操作02|基本命令-CSDN博客 目录 六、chmod&#xff1a;给文件设置权限 1、字母法 2、数字法&#xff08;用的最多&#xff09; 七、vim&#xff1a;代码编写和文本编辑 1、启动和退出 1️⃣启动 2️⃣退出 2、vim基本操作 六、chmod&#x…...

编程日记 2024/12/14 8:32:49

数据库同步中间件DBSyncer安装配置及使用

1、介绍 DBSyncer&#xff08;英[dbsɪŋkɜː]&#xff0c;美[dbsɪŋkɜː 简称dbs&#xff09;是一款开源的数据同步中间件&#xff0c;提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景。支持上传插件自定义同步转换业务&#xf…...

编程日记 2024/12/14 8:28:45

虚幻5描边轮廓材质

很多游戏内都有这种描边效果&#xff0c;挺实用也挺好看的&#xff0c;简单复刻一下 效果演示&#xff1a; Linethickness可以控制轮廓线条的粗细 这样连完&#xff0c;然后放到网格体细节的覆层材质上即可 可以自己更改粗细大小和颜色...

编程日记 2024/12/14 8:27:44

ISP帳戶會記錄什麼資訊？

許多用戶並不知道ISP會記錄有關線上活動的大量資訊。從流覽歷史記錄到數據使用情況&#xff0c;ISP經常收集和保留用戶數據&#xff0c;引發一系列隱私問題。 ISP 記錄哪些數據&#xff1f; ISP可以根據其隱私政策記錄各種類型的資訊。常見的記錄數據包括&#xff1a; 1.流覽…...

编程日记 2024/12/14 8:26:43

Facebook如何避免因IP变动而封号？实用指南

随着Facebook在个人社交与商业推广中的广泛应用&#xff0c;越来越多的用户面临因“IP变动”而被封号的问题。尤其是跨境电商、广告运营者和多账号管理用户&#xff0c;这种情况可能严重影响正常使用和业务发展。那么&#xff0c;如何避免因IP变动导致的封号问题&#xff1f;本…...

编程日记 2024/12/14 8:25:42

EXCEL数据清洗的几个功能总结备忘

目录 0 参考教材 1 用EXCEL进行数据清洗的几个功能 2 删除重复值&#xff1a; 3 找到缺失值等 4 大小写转换 5 类型转化 6 识别空格 0 参考教材 精通EXCEL数据统计与分析&#xff0c;中国&#xff0c;李宗璋用EXCEL学统计学&#xff0c;日EXCEL统计分析与决策&#x…...

编程日记 2024/12/14 8:23:39

web网页连接MQTT，显示数据与下发控制命令

web网页连接MQTT&#xff0c;显示数据与下发控制命令 零、前言 在完成一些设备作品后&#xff0c;常常会因为没有一个上位机用来实时检测数据和下发命令而苦恼&#xff0c;在上一篇文章中提到了怎么白嫖阿里云服务器&#xff0c;并且在上面搭建了属于自己的web网站。那么现在…...

编程日记 2024/12/14 8:21:38

数据结构day3作业

一、完整功能【顺序表】的创建 【seqList.h】 #ifndef __SEQLIST_H__ #define __SEQLIST_H__#include <stdio.h> #include <string.h> #include <stdlib.h>//宏定义&#xff0c;线性表的最大容量 #define MAX 30//类型重定义&#xff0c;表示要存放数据的类…...

编程日记 2024/12/14 8:18:35

AugGPT：基于上下文感知的AI代码生成器设计与实现

1. 项目概述&#xff1a;当代码生成器遇上“增强现实”如果你和我一样&#xff0c;长期在代码的海洋里“游泳”&#xff0c;那么对GitHub上琳琅满目的代码生成工具一定不陌生。从早期的代码片段补全&#xff0c;到如今能生成完整函数甚至模块的AI助手&#xff0c;它们确实极大地…...

编程新知 2026/5/15 7:38:00

运算放大器在扫地机器人硬件设计中的六大关键应用解析

1. 项目概述&#xff1a;当扫地机器人遇上运算放大器扫地机器人&#xff0c;这个二十多年前还只是科幻电影里的概念&#xff0c;如今已经成了许多家庭的清洁主力。从最初的“随机碰撞式”清扫&#xff0c;到如今具备激光导航、自动集尘、智能拖地等复杂功能&#xff0c;它的“智…...

编程新知 2026/5/15 7:18:46

告别繁琐搜索：baidupankey让百度网盘提取码查询变得轻松高效

告别繁琐搜索&#xff1a;baidupankey让百度网盘提取码查询变得轻松高效 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 还在为百度网盘分享链接缺少提取码而烦恼吗&#xff1f;每次遇到需要输入提取码的资源&#xff0c;都要…...

编程新知 2026/5/15 7:16:33

FPGA实现JPEG-LS硬件编码器：架构、算法与工程实践

1. 项目概述&#xff1a;一个开源的JPEG-LS硬件编码器最近在翻看一些开源硬件项目时&#xff0c;看到了一个名为“FPGA-JPEG-LS-encoder”的仓库。这个项目由WangXuan95维护&#xff0c;从名字就能一眼看出&#xff0c;它是一个用硬件描述语言实现的JPEG-LS图像压缩编码器&…...

编程新知 2026/5/15 6:41:23

PROFINET工业以太网：实时通信与设备互操作性解析

1. PROFINET技术架构解析PROFINET作为工业自动化领域的实时以太网标准&#xff0c;其核心价值在于解决了传统以太网在工业场景中的三大痛点&#xff1a;确定性延迟、实时性保障和设备互操作性。与普通办公以太网不同&#xff0c;工业环境要求通信系统必须满足严格的时序要求&am…...

编程新知 2026/5/15 6:33:28

OBS Multi RTMP插件：终极多平台直播同步解决方案

OBS Multi RTMP插件&#xff1a;终极多平台直播同步解决方案 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 在当今的多平台直播时代&#xff0c;内容创作者面临着同时向多个平台推送直…...

编程新知 2026/5/15 5:13:20

AI辅助游戏开发：Claude-Code-Game-Studios项目实战解析

1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Claude-Code-Game-Studios”。光看这个名字&#xff0c;可能很多朋友会有点懵&#xff0c;这到底是干嘛的&#xff1f;是做游戏的工作室&#xff0c;还是用AI写代码的工具&#xff1f;其实&#xf…...

编程新知 2026/5/15 4:59:29

Memo性能优化秘籍：提升Flutter应用响应速度的10个技巧

Memo性能优化秘籍&#xff1a;提升Flutter应用响应速度的10个技巧 【免费下载链接】memo Memo is an open-source, programming-oriented spaced repetition software (SRS) written in Flutter. 项目地址: https://gitcode.com/gh_mirrors/me/memo Memo是一款基于Flutt…...

编程新知 2026/5/15 4:10:13

Rust命令行截图工具开发：从设计到实现的全流程解析

1. 项目概述&#xff1a;一个轻量级截图工具的诞生 最近在折腾一个个人小项目&#xff0c;起因很简单&#xff1a;我对市面上那些动辄几百兆、启动慢、功能臃肿的截图工具感到厌倦了。我需要一个纯粹的、快速的、能让我在几秒钟内完成“看到-截取-处理-分享”整个流程的工具。于…...

编程新知 2026/5/15 3:49:57

群晖使用git遇到的问题

文章目录使用流程&#xff1a;多用户说明注意补充使用流程&#xff1a; 这是为了解决每次使用都需要输入密码的问题 1&#xff0c;在windows上&#xff0c;使用命令 生成公私钥对 ssh-keygen -t ed25519会在 C:\Users\你的用户名.ssh\下生成 id_ed25519 id_ed25519.pub2,将…...

编程新知 2026/5/15 3:45:45