小程序显示兼容处理,home键处理

定义:
env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量,用于获取设备底部和顶部安全区域的大小

示例:

padding-bottom: calc(env(safe-area-inset-bottom) + 12px); /* 兼容iOS>= 11.2 */

安全间距类型:

  1. 屏幕上安全距离: safe-area-inset-top
  2. 屏幕右安全距离: safe-area-inset-right
  3. 屏幕下安全距离: safe-area-inset-bottom
  4. 屏幕左安全距离: safe-area-inset-left

ios11

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

ios11.2+

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容写法(最好)

// 顶部安全距离
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);// 底部安全距离
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

在h5界面如何使用

注: 需在meta标签的content中设置viewport-fit=cover, 安全区域才可生效

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

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

相关文章

【消息队列】RocketMQ 并发消费和顺序消费

在 RocketMQ 中,消息的消费模式包括并发消费和顺序消费,它们分别适用于不同的业务场景。下面是对这两种消费模式的介绍: 1. 并发消费: 特点: 并发消费是指多个消费者实例同时处理消息,每个实例独立地处理一…

js实现iframe内容加载失败自动重新加载功能

最近一个项目上的程序经常出现掉线的情况,经排查是该单位的网络不稳定,存在网络丢包现象。导致有时候程序运行加载页面失败,开机自启动应用时出现请求失败的概率非常大,为了解决这个问题我在网上东找西找也没有找到有效的解决办法…

【现代控制系统】最小实现与互质分式

最小实现和互质分式 2023年12月12日 文章目录 最小实现和互质分式1. 实现问题2. SISO严格正则系统的实现2.1 能控标准1型实现2.2 能观标准2型实现2.3 能观标准1型实现2.4 能控标准2型实现2.5 最小实现2.6 完全表征 3. 计算互质分式3.1 使用西尔韦斯特结式 4. SISO基于Markov参…

丰果管道——2024中国家装管道十大品牌

丰果管道——2024中国家装管道十大品牌 丰果(中国)有限公司 丰果管道品牌创立于1999年,是国内最早从事PPR家装管道生产的品牌之一,在业内有着良好的口碑和市场美誉度,在全国的头部装企更是有相当高的市场占有率。2023年…

猫咪发腮长肉吃什么?5款适合猫咪发腮长肉的猫罐头推荐

随着冬季的来临,北方的小猫咪们因为有暖气,日子还算好过。然而南方的猫咪们只能依靠自己的抵抗力来度过这个寒冷的季节。为了确保这些怕冷的小家伙能温暖地度过冬天,铲屎官们是不是该考虑为它们囤积一些肉肉呢? 有些猫咪&#xf…

Go-gin-example 个人注释添加学习版 第三部分 编写一个简单的文件日志

文章目录 本文目标新建logging包file.go编写log文件当前目录结构 接入自定义的log功能验证功能 _ 学习煎鱼大佬的该项目 煎鱼大佬网站 原github地址 个人github项目地址,希望得到一点star 本文目标 在上一节中,我们解决了 API’s 可以任意访问的问题&a…

无货源跨境电商到底应该怎么做,新手必看

如今,跨境电商无疑已经成为了一个热门的创业领域,但对于一些新手来说,面临的一个主要挑战是如何处理产品的货源问题。下面我就和大家分享一下无货源跨境电商的基本概念以及一些新手可以采取的策略和步骤,帮助大家在这个领域取得成…

C#MQTT编程08--MQTT服务器和客户端(cmd版)

1、前言 前面完成了winform版,wpf版,为什么要搞个cmd版,因为前面介绍了mqtt的报文结构,重点分析了【连接报文】,【订阅报文】,【发布报文】,这节就要就看看实际报文是怎么组装的,这…

Flink编程——风险欺诈检测

Flink 风险欺诈检测 文章目录 Flink 风险欺诈检测背景准备条件FraudDetectionJob.javaFraudDetector.java 代码分析执行环境创建数据源对事件分区 & 欺诈检测输出结果运行作业欺诈检测器 欺诈检测器 v1:状态欺诈检测器 v2:状态 时间完整的程序期望的…

3C市场发展态势疲软?直播电商带来新机遇

“ 能否迎来新生 ” 文|王娴 编辑 | 靳淇 出品|极新 目前直播电商成为家电3C行业不可替代的经营阵地,电商生态的重构为关注沟通渠道与销售通路的家电3C行业带来更多选择。内容场与货架场贯通的独特优势,正吸引商家加速入场全域兴趣电商。…

Failed at the node sass@4.14.1 postinstall script.

首先,查看node和 npm版本 #用于列出已安装的 Node.js 版本。 nvm ls #切换node版本 nvm use 12.17.0 #换国内镜像源:(单独设置sass的安装源。) npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass …

外卖系统创新:智能推荐与用户个性化体验

外卖系统的日益普及使得用户对于更智能、个性化的体验有着不断增长的期望。在这篇文章中,我们将探讨如何通过智能推荐技术,为用户提供更贴心、更符合口味的外卖选择。我们将使用 Python 和基于协同过滤的推荐算法作为示例,让您更深入地了解智…

VBA_MF系列技术资料1-315

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧,我参考大量的资料,并结合自己的经验总结了这份MF系列VBA技术综合资料,而且开放源码(MF04除外),其中MF01-04属于…

练习题 将x减到0的最小操作数

题目 给你一个整数数组 nums 和一个整数 x 。每一次操作时,你应当移除数组 nums 最左边或最右边的元素,然后从 x 中减去该元素的值。请注意,需要 修改 数组以供接下来的操作使用。 如果可以将 x 恰好 减到 0 ,返回 最小操作数 &…

CSS常见元素类型 盒子模型

文章目录 常见元素类型块元素内联元素空元素修改元素类型测试元素类型 盒子模型标准文本流:外边距和内边距测试盒子模型 常见元素类型 块元素 常见块元素: div p h1~h6 ul li img 这些元素结束之后自带换行,一行只能存在一个元素,无法横向排列&#xf…

selenium代理ip可用性测试

测试代理ip是否工作正常,将正常的代理ip提取出来 from selenium import webdriver from fake_useragent import UserAgent def check_proxy(proxy):print("开始测试:"proxy)chrome_options webdriver.ChromeOptions()chrome_options.add_arg…

html + css + js简单的项目

以下内容直接复制粘贴就能运行 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title&…

uniapp打包配置 (安卓+ios)

TOC 基础配置 HBuilderX中打开项目的manifest.json文件&#xff0c;在“基础配置”中可以设置App的应用名称、版本号等信息&#xff1a; 应用标识 DCloud应用appid&#xff08;简称appid&#xff09;是由DCloud创建App项目时生成的唯一标识&#xff0c;关联DCloud云端服务&…

CentOS 8.5 安装图解

特特特别的说明 CentOS发行版已经不再适合应用于生产环境&#xff0c;客观条件不得不用的话&#xff0c;优选7.9版本&#xff0c;8.5版本次之&#xff0c;最次6.10版本&#xff08;比如说Oracle 11GR2就建议在6版本上部署&#xff09;&#xff01; 引导和开始安装 选择倒计时结…

原生微信小程AR序实现模型动画播放只播放一次,且停留在最后一秒

1.效果展示 0868d9b9f56517a9a07dfc180cddecb2 2.微信小程序AR是2023年初发布&#xff0c;还有很多问提&#xff08;比如glb模型不能直接播放最后一帧&#xff1b;AR识别不了金属、玻璃材质的模型等…有问题解决了的小伙伴记得告诉我一声&#xff09; 微信官方文档地址 3.代码…