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

小程序进阶-env(safe-area-inset-bottom)的使用

一、简介

env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量,用于获取设备底部和顶部安全区域的大小。
所谓的安全区域就是指在iPhone X及以上的设备中,为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域,以确保内容在安全区域内显示。

这个变量最好和padding或者height(可结合calc一起)结合使用,会达到最好的效果。

二、应用

  1. 和padding的结合
padding-bottom: env(safe-area-inset-bottom);

如果想让安全区域再靠上20px,则结合calc使用如下:

padding-bottom: calc(20px + env(safe-area-inset-bottom)); 
  1. 和height的结合
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) ;
  1. 机型兼容
    在某些机型上识别不出env(safe-area-inset-bottom)和env(safe-area-inset-top),会导致高度等失效。可做如下兼容:
//兼容普通机型,不识别变量的机型:
height: calc(100vh - 144px);
//兼容苹果手机
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

如果识别这两个变量,则执行第二句,覆盖第一句;如果不识别这两个变量呢,则不识别第二句,执行第一句。这就是一个完美的兼容写法!

相关文章:

小程序进阶-env(safe-area-inset-bottom)的使用

一、简介 env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量,用于获取设备底部和顶部安全区域的大小。 所谓的安全区域就是指在iPhone X及以上的设备中,为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域&am…...

移动端App持续集成体系构建实战

这里写目录标题 一、目标1、前言2、优势:3、涉及技术点4、目标 二、测试app构建、打包过程1、安卓打包的环境要求 三、演示安卓源码打包四、演示安卓App部署1、前提条件2、命令控制apk安装与卸载 五、安卓UI自动化测试1、Appium app自动化测试-Python2、实现的验证点…...

Mybatis的关联关系配置一对一,一对多,多对多的映射关系

目录 关联关系映射 一对一关联: 一对多关联: 多对多关联: 导入数据库表 一对多 一对一 多对多 关联关系映射 关联关系映射在Mybatis中主要通过三种方式实现:一对一关联和一对多关联及多对多关联。 一对一关联:…...

计算机竞赛 基于深度学习的中文情感分类 - 卷积神经网络 情感分类 情感分析 情感识别 评论情感分类

文章目录 1 前言2 情感文本分类2.1 参考论文2.2 输入层2.3 第一层卷积层:2.4 池化层:2.5 全连接softmax层:2.6 训练方案 3 实现3.1 sentence部分3.2 filters部分3.3 featuremaps部分3.4 1max部分3.5 concat1max部分3.6 关键代码 4 实现效果4.…...

时序预测 | MATLAB实现CNN-BiGRU卷积双向门控循环单元时间序列预测

时序预测 | MATLAB实现CNN-BiGRU卷积双向门控循环单元时间序列预测 目录 时序预测 | MATLAB实现CNN-BiGRU卷积双向门控循环单元时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现CNN-BiGRU卷积双向门控循环单元时间序列预测; 2.运行环境…...

[Rust GUI]0.10.0版本iced代码示例 - progress_bar

-1 字体支持 iced0.10.0 仅支持指定系统内置字体(iced默认字体中文会乱码) iced0.10.0 手动加载字体的功能已经砍了,想手动加载就用0.9.0版本,文档0.9.0版本 想显示中文则需要运行在一个自带字体的Windows系统上。而且这个字体最好不要钱。 (Windows闲着…...

使用vue-pdf出现的卡顿,空白,报错,浏览器崩溃解决办法

如果想直接知道解决办法,请翻到最下面 今天,接到了一个新的需求,我们公司的PDF展示卡住了,导致浏览器直接奔溃。我也刚来公司不久,就去看看是怎么发生的,公司前同事用的vue-pdf,刚开始以为是文…...

(笔记七)利用opencv进行形态学操作

(1)程序清单 形态学操作是一种图像处理技术,它基于数学形态学理论,用于改变图像的形状和结构。它主要通过结构元素的腐蚀和膨胀操作来实现。 #!/usr/bin/env python # -*- coding:utf-8 -*- """ author: LIFEI t…...

Spring是什么?

什么是Spring 我知道你现在可能迫不及待地想要开始编写Spring应用了。我向你保证,在本章结束之前,你肯定能够开发一个简单的Spring应用。但首先,我将使用Spring的一些基础概念为你搭建一个舞台,帮助你理解Spring是如何运转起来的…...

电梯SIP-IP五方对讲管理系统

电梯SIP-IP五方对讲管理系统 是深圳锐科达精心打磨的一款IP数字信号对讲设备,是在传统电梯对讲系统基础上的一次全新升级,突破了模拟、FM调频系统存在的技术障碍,实现联网;在模/数交替的过程中,继承了模拟、FM调频系统的优点&…...

leetcode283移动零

题目: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入:…...

Docker 部署SpringBoot项目,使用外部配置文件启动项目

一、Springboot项目引入配置文件的方式: 第一种是在jar包的同一目录下建一个config文件夹,然后把配置文件放到这个文件夹下; 第二种是直接把配置文件放到jar包的同级目录; 第三种在classpath下建一个config文件夹,然后…...

电子半导体行业电能质量监测与治理系统解决方案 安科瑞 许敏

摘要:在国家鼓励半导体材料国产化的政策导向下,本土半导体材料厂商不断提升半导体产品技术水平和研发能力,逐渐打破了国外半导体厂商的垄断格局,推进中国半导体材料国产化进程,促进中国半导体行业的发展。半导体产品的…...

pdfh5在线预览pdf文件

前言 pc浏览器和ios的浏览器都可以直接在线显示pdf文件&#xff0c;但是android浏览器不能在线预览pdf文件&#xff0c;如何预览pdf文件&#xff1f; Github: https://github.com/gjTool/pdfh5 Gitee: https://gitee.com/gjTool/pdfh5 使用pdfh5预览pdf 编写预览页面 <…...

Java智慧工地大数据中心源码

智慧工地技术架构&#xff1a;微服务JavaSpring Cloud VueUniApp MySql 智慧工地形成安全、质量、进度、人员、机械、绿色施工六大针对性解决方案。 安全管理 围绕重大危险源提供管控&#xff0c;可视化跟踪消防、安防、基坑、高支模、临边防护、卸料平台等设施设备的安全状态…...

关于人工智能的担忧

人工智能的快速发展引发了一系列关于其潜在风险和担忧的讨论。以下是一些常见的人们对人工智能的担忧&#xff1a; 失业问题&#xff1a;人工智能的出现可能会导致很多工作岗位的消失&#xff0c;特别是那些需要重复性劳动的工作。人们担心机器取代人类工作将导致大规模失业和社…...

JVM之强软弱虚引用

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;有几种不同类型的引用&#xff0c;它们分别是&#xff1a;强引用&#xff08;Strong Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;、虚引用&am…...

Python编程练习与解答 练习98:一个数是素数吗

质数是大于1的整数&#xff0c;它只能被1和它本身整除。编写一个函数&#xff0c;来确定他的参数是不是质数&#xff0c;如果是&#xff0c;则返回True&#xff0c;否则返回False。编写一个main程序&#xff0c;从用户那里读取一个整数并显示一条消息&#xff0c;指示它是不是质…...

vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离

vue3tsuniapp实现小程序端input获取焦点计算上推页面距离 input获取焦点计算上推页面距离 1.先说我这边的需求2.发现问题3.解决思路4.代码展示 自我记录 1.先说我这边的需求 需求 1.给键盘同级添加一个按钮例如’下一步’ or ‘确认’ 这种按钮 2.初步想法就是获取input焦点时…...

【2023集创赛】加速科技杯二等奖作品:基于ATE的电源芯片测试设计与性能分析

本文为2023年第七届全国大学生集成电路创新创业大赛&#xff08;“集创赛”&#xff09;加速科技杯二等奖作品分享&#xff0c;参加极术社区的【有奖征集】分享你的2023集创赛作品&#xff0c;秀出作品风采&#xff0c;分享2023集创赛作品扩大影响力&#xff0c;更有丰富电子礼…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...