兼容问题---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*/ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/868932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

两位软件工程师创业,开发出一款软件质量保证自主AI代理,融资总额超3000万美元

编译整理&#xff5c;TesterHome社区 来源&#xff5c;TechCrunch 随着生成式人工智能&#xff08;generative AI&#xff09;的出现&#xff0c;人工智能应用正在改变和重塑各行各业&#xff0c;并改变人们的工作方式。软件开发也不例外。 总部位于旧金山和东京的初创公司Aut…

前端导出pdf

async generatePDF() {const element this.$refs.contentToPrint; // 你想要转换成PDF的DOM元素// 使用html2canvas将DOM元素转换成canvasconst canvas await html2canvas(element);const imgData canvas.toDataURL(image/png);// 创建PDF并添加图片const pdf new jsPDF({o…

自动化立体仓库设计步骤:7步

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载 这份文件是关于自动化立体仓库设计步骤的详细指南&#xff0c;其核心内容包括以下几个阶…

怎么区分服务器的硬盘是ssd还是hdd?

区分服务器的硬盘是SSD还是HDD可以通过多种方法进行&#xff0c;包括操作系统内置工具、命令行工具以及第三方软件。以下是几种常见的方法&#xff1a; 操作系统内置工具 Windows 1.任务管理器 打开任务管理器(Ctrl Shift Esc)。 点击“性能”选项卡。 选择“磁盘”项。通常会…

孟德尔随机化与痛风4

写在前面 今天阅读的文献是多种暴露与某结局的孟德尔随机化&#xff0c;算是以量取胜了。 The effect of metabolism-related lifestyle and clinical risk factors on digestive system cancers in East Asian populations: a two-sample Mendelian randomization analysis …

淘宝商品评论电商API接口:帮你轻松挑选优质商品

随着互联网的快速发展&#xff0c;电子商务应运而生&#xff0c;并在短时间内取得了巨大的成功。其中&#xff0c;淘宝作为我国最大的在线购物平台之一&#xff0c;每天都有数以亿计的商品交易发生。然而&#xff0c;面对海量的商品信息&#xff0c;如何挑选出优质商品成为了一…

800 元打造家庭版 SOC 安全运营中心

今天,我们开始一系列新的文章,将从独特而全面的角度探索网络安全世界,结合安全双方:红队和蓝队。 这种方法通常称为“紫队”,集成了进攻和防御技术,以提供对威胁和安全解决方案的全面了解。 在本系列的第一篇文章中,我们将指导您完成以 100 欧元约800元左右的预算创建…

HTML最快速最简单

1、HTML 文档由 HTML 元素定义 2、HTML 元素语法 HTML 元素以开始标签起始&#xff0c;HTML 元素以结束标签终止空元素在开始标签中进行关闭&#xff08;以开始标签的结束而结束&#xff09;元素的内容是开始标签与结束标签之间的内容 3、空元素 空元素&#xff08;Void Ele…

音视频封装demo:将h264数据和aac数据封装(mux)成TS文件(纯手工,不依赖第三方开源库)

1、README a. demo使用 $ make clean && make DEBUG1 $ $ ./ts_mux_h264_aac Usage:./ts_mux_h264_aac avfile/test1_856x480_24fps.h264 24 avfile/test1_44100_stereo.aac out1.ts./ts_mux_h264_aac avfile/test2_720x480_30fps.h264 60 avfile/test2_48000_stereo…

无人机在交通管理方面的应用与潜力

随着智能化和数字化技术的发展&#xff0c;无人机已经成为智慧交通管理体系中的重要一环。无人机能够搭载各种专业设备&#xff0c;如超清摄像头、红外热成像摄像头、目标跟踪器等&#xff0c;从而完成多任务的数据采集和快速机动的任务执行。这些数据通过无线传输实时回传&…

LVS+Nginx高可用集群--基础篇(二)

1.虚拟主机-使用nginx为静态资源提供服务 静态资源服务器&#xff1a;主要包括两类资源&#xff0c;网页&#xff1b;图片&#xff0c;音频等&#xff1b; 也可以通过别名设置静态资源路径。 配置代码&#xff1a; server {listen 88;server_name localhost;locatio…

前端八股文 vue2和vue3的区别

主要有 4点的区别 框架区别 数据响应式的不同 生命周期函数的不同 api风格的不同 1.框架的区别 Vue 3 更倾向于使用 Vite 作为构建工具&#xff0c;基于 ES Modules 标准&#xff0c;提供更快的编译速度和简化开发过程。相比之下&#xff0c;Vue 2 通常使用 webpac…

Kudu分区策略

Kudu表的分区策略主要有三种&#xff1a;范围分区&#xff08;Partition By Range&#xff09;、哈希分区&#xff08;Partition By Hash&#xff09;和高级分区&#xff08;Partition By Hash And Range&#xff09;。这些策略都要求分区字段必须包含在主键中。 范围分区&…

关于使用Easyswoole 自定义MYSQL 连接池,一段时间后,操作接口,报数据库连接错误,然后在请求接口,就正常了

关于使用Easyswoole 自定义MYSQL 连接池,一段时间后,操作接口,报数据库连接错误,然后在请求接口,就正常了 首先我们来看看对应的easyswoole 数据库注册 Config/Mysq.php $mysql[mysql] []; $mysql[mysql][default] [name > default,host > 127.0.0.1,port > 330…

数据安全治理:从库级权限申请到表级权限申请

背景 随着数据安全意识的提高&#xff0c;企业越来越重视数据治理和权限管理。传统数仓大多对库级别进行读写授权&#xff0c;仅对人工标记的敏感库进行表级别授权&#xff0c;但由于敏感等级是由人为标记&#xff0c;错误率较高&#xff0c;故期望将权限申请流程细化到表级申…

树莓派_Pytorch学习笔记20:初步认识深度学习框架

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: ​ Python 版本3.7.3&#xff1a; ​ 本文很水&#xff0c;就介绍一下我以后的学习使用P…

【线程同步-1】

三大不安全案例 1、车站买票 package syn; ​ //不安全的买票 //线程不安全&#xff0c;有负数 public class UnsafeBuyTicket {public static void main(String[] args) {BuyTicket buyTicket new BuyTicket();new Thread(buyTicket,"xiaoming").start();new Thr…

STM32-按键及传感器模块

本内容是基于江协科技STM32视频整理而得。 1. 按键及传感器模块 1.1 按键简介 按键&#xff1a;常见的输入设备&#xff0c;按下导通&#xff0c;松手断开&#xff1b; 按键抖动&#xff1a;由于按键内部使用的是机械式弹簧片来进行通断的&#xff0c;所以在按下和松手的瞬间…

【代码随想录】【算法训练营】【第63天】 [卡码53]寻宝

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 63&#xff0c;周二&#xff0c;ding~ 题目详情 [卡码53] 寻宝 题目描述 卡码53 寻宝 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 prim算法 kruskal…

百望股份于港交所上市 用户量突破2300万

7月9日&#xff0c;百望股份&#xff08;股份代码&#xff1a;6657.HK&#xff09;正式于港交所上市&#xff0c;以32港元价格开盘&#xff0c;成为“电子发票第一股”。 招股书披露&#xff0c;百望股份成立于2015年&#xff0c;作为一家专注于企业数字化解决方案的提供商&…