小程序适配IOS底部小黑条

1、IOS底部小黑条高34px进行适配

<view class="container-px" style="padding-bottom: {{isIOS ? '68rpx' : 0}};"><view class="container-wrap"></view>
</view>

2、使用css

兼容ios<11.2
padding-bottom: constant(safe-area-inset-bottom); 底部安全区域812 - 778 = 34
兼容ios>11.2
padding-bottom: env(safe-area-inset-bottom);
env() 跟 constant() 需要同时存在,而且顺序不能换

<view class="container-css-fit"><view class="container-wrap"></view>
</view>
.container-css-fit{box-sizing: border-box;width: 100%;height: 100vh;/* 兼容ios<11.2 */padding-bottom: constant(safe-area-inset-bottom);  /* 底部安全区域812 - 778 = 34*//* 兼容ios>11.2 */padding-bottom: env(safe-area-inset-bottom);/* env() 跟 constant() 需要同时存在,而且顺序不能换 */
}
.container-wrap{width: 100%;height: 100%;background-color: plum;
}

3、使用getSystemInfoSync计算安全区域

<view class="container-system" style="{{result.bottomSafeHeight ? ('padding-bottom: ' + result.bottomSafeHeight + 'px') : ''}}"><view class="container-wrap"></view>
</view>

const res = wx.getSystemInfoSync()
const result = {
…res,
bottomSafeHeight: 0,
isIphoneX: false,
isMi: false,
isIphone: false,
isIpad: false,
isIOS: false,
isHeightPhone: false,
}
const modelmes = result.model
const system = result.system
// 判断设备型号
if (modelmes.search(‘iPhone X’) != -1 || modelmes.search(‘iPhone 11’) != -1) {
result.isIphoneX = true;
}
if (modelmes.search(‘MI’) != -1) {
result.isMi = true;
}
if (modelmes.search(‘iPhone’) != -1) {
result.isIphone = true;
}
if (modelmes.search(‘iPad’) > -1) {
result.isIpad = true;
}
let screenWidth = result.screenWidth
let screenHeight = result.screenHeight
// 宽高比自适应
screenWidth = Math.min(screenWidth, screenHeight)
screenHeight = Math.max(screenWidth, screenHeight)
const ipadDiff = Math.abs(screenHeight / screenWidth - 1.33333)
if (ipadDiff < 0.01) {
result.isIpad = true
}
if (result.isIphone || system.indexOf(‘iOS’) > -1) {
result.isIOS = true
}
const myCanvasWidth = (640 / 375) * result.screenWidth
const myCanvasHeight = (1000 / 667) * result.screenHeight
const scale = myCanvasWidth / myCanvasHeight
if (scale < 0.64) {
result.isHeightPhone = true
}
result.navHeight = result.statusBarHeight + 46
result.pageWidth = result.windowWidth
result.pageHeight = result.windowHeight - result.navHeight
if (!result.isIOS) {
result.bottomSafeHeight = 0
}
const capsuleInfo = wx.getMenuButtonBoundingClientRect() // 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点
// 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度
const navbarHeight = (capsuleInfo.top - result.statusBarHeight) * 4 + capsuleInfo.height
// 写入胶囊数据
result.capsuleInfo = capsuleInfo;
// 安全区域
const safeArea = result.safeArea
// 可视区域高度 - 适配横竖屏场景
const height = Math.max(safeArea.height, safeArea.width)
// 状态栏高度
const statusBarHeight = result.statusBarHeight
// 获取底部安全区域高度(全面屏手机)
if (safeArea && height && screenHeight) {
result.bottomSafeHeight = screenHeight - height - statusBarHeight
if (result.bottomSafeHeight < 0) {
result.bottomSafeHeight = 0
}
}
// 设置header高度
result.headerHeight = statusBarHeight + navbarHeight
// 导航栏高度
result.navbarHeight = navbarHeight

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

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

相关文章

[NOIP2004]不高兴的津津 -- --- 牛客网

题目描述 津津上初中了。妈妈认为津津应该更加用功学习&#xff0c;所以津津除了上学之外&#xff0c;还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴&#xff0c;而且上得越久就会越不高兴。假设…

【LeetCode】455. 分发饼干(简单)——代码随想录算法训练营Day31

题目链接&#xff1a;455. 分发饼干 题目描述 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1…

C语言=和==如何区分?

一、问题 这两个符号&#xff0c;在不严格的情况下&#xff0c;都可以读成“等于”&#xff0c;但是两个“等于”在程序中有完全不同的⽤法。错误使⽤将导致程序⽆法得出正确的结果&#xff0c;⽽且有时没有错误提⽰。 那么&#xff0c;怎样正确区分这两个运算符呢&#xff1f…

《区块链公链数据分析简易速速上手小册》第3章:区块链数据结构(2024 最新版)

文章目录 3.1 区块和交易的结构3.1.1 基础知识3.1.2 重点案例&#xff1a;构建简单的区块链3.1.3 拓展案例 1&#xff1a;验证交易签名生成密钥对签名交易验证签名完整的交易签名与验证演示 3.1.4 拓展案例 2&#xff1a;监听和解析区块链事件代币合约示例&#xff08;Solidity…

Android adb使用超级大全

Android adb使用超级大全 ADB&#xff0c;即Android Debug Bridge&#xff0c;是一款强大的工具&#xff0c;对于Android开发/测试人员来说是不可或缺的&#xff0c;同时也是Android设备玩家的好玩具。本文将详细介绍ADB的使用方法。 ADB的基本用法如下&#xff1a; 命令语法…

Pb协议的接口测试

Protocol Buffers 是谷歌开源的序列化与反序列化框架。它与语言无关、平台无关、具有可扩展的机制。用于序列化结构化数据&#xff0c;此工具对标 XML &#xff0c;支持自动编码&#xff0c;解码。比 XML 性能好&#xff0c;且数据易于解析。更多有关工具的介绍可参考官网。 P…

Django form组件 - 神奇的后端直接渲染HTML

前言 之前在HTML页面中利用form表单向后端提交数据时会写一些获取用户输入的标签并且使用form标签将其包裹起来。并且很多场景下都需要对用户的输入做校验&#xff0c;比如用户输入的长度和格式等&#xff0c;如果用户输入的有误就需要在页面上相应的位置显示相应的错误信息。…

JavaScript学习之旅8------深入理解JavaScript:作用域与词法环境解析

目录 写在开头1. JavaScript作用域简介1.1. 定义作用域1.2. 作用域链1.3. 全局作用域1.4. 局部作用域1.5. 块级作用域1.6. 作用域和变量生命周期 2. 词法环境与闭包2.1. 词法环境2.2. 闭包2.3. 闭包的工作原理2.4. 闭包的应用实例2.5. 闭包的注意事项 3. 作用域与变量提升3.1. …

NOIP2003.加分二叉树

题目链接 题目描述 设一个n个节点的二叉树tree的中序遍历为&#xff08;l,2,3,…,n&#xff09;&#xff0c;其中数字1,2,3,…,n为节点编号。每个节点都有一个分数&#xff08;均为正整数&#xff09;&#xff0c;记第j个节点的分数为di&#xff0c;tree及它的每个子树都有一个…

RBF神经网络中的RBF的英文全称是什么,是用来干什么的?

问题描述&#xff1a;RBF神经网络中的RBF的英文全称是什么&#xff0c;是用来干什么的&#xff1f; 问题解答&#xff1a; RBF神经网络中的RBF是径向基函数&#xff08;Radial Basis Function&#xff09;的缩写。径向基函数是一种在机器学习和模式识别中常用的函数类型&…

数据库从入门到精通(一)数据库基础操作

mysql数据库基础操作 cmd下启动mysql数据库操作命令数据库重要的删除操作数据库增删改查操作插入数据更新数据删除数据查询数据查询指定记录in查询满足指定范围之内的条件记录not in查询不在指定范围之内的条件记录带between and 的范围查询带like的字符匹配查询(d%以d开头,%d以…

猫头虎分享已解决Bug || SyntaxError: Unexpected token o in JSON at position 1 ‍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

手动下载spacy的en_core_web_sm模型

手动下载 首先&#xff0c;用下面连接下载模型。我下载了 .tar.gz 格式。 然后提取它并通过指定所需子文件夹的路径将其加载到代码中。为了确保路径正确&#xff0c;您应该进入包含 config.cfg 文件的文件夹。 https://github.com/explosion/spacy-models/releases 例子代码…

Python在生物信息学中的应用:同时对数据做转换和换算

我们需要调用一个换算&#xff08;reduction&#xff09;函数&#xff0c;例如 sum()、min()、max()等&#xff0c;但首先得对数据做转换或筛选。 解决方案 一种优雅的方式能将数据换算和转换结合在一起&#xff0c;即在函数中使用生成器表达式。例如&#xff0c;要计算平方和&…

【MATLAB】小波神经网络回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 小波神经网络回归预测算法是一种利用小波变换和人工神经网络相结合的方法&#xff0c;用于解决回归预测问题。下面将详细介绍该算法的原理与方法&#xff1a; 小波变换&#xff1a; 小波变…

LeetCode115. Distinct Subsequences——动态规划

文章目录 一、题目二、题解 一、题目 Given two strings s and t, return the number of distinct subsequences of s which equals t. The test cases are generated so that the answer fits on a 32-bit signed integer. Example 1: Input: s “rabbbit”, t “rabbit…

rocketMQ下载、安装及配置

topic主题 - 里边存在多个队列&#xff08;队列是真实存在的&#xff09; rocketMQ安装及配置 一、官网下载 windows和linux系统版本都一样。Binary 下载 下载 | RocketMQ (apache.org) 二、修改运行内存及broker.conf、配置环境变量 1、修改根目录->bin目录下runserve…

如何生成一个修仙世界的狗血短剧剧本2

如何生成一个修仙世界的狗血短剧剧本2 生成一个修仙世界的狗血短剧剧本对话 生成一个修仙世界的狗血短剧剧本 剧本名称&#xff1a;《仙途情缘》 角色&#xff1a; 易天行&#xff1a;男主角&#xff0c;天赋异禀的修仙者&#xff0c;性格坚毅&#xff0c;正直善良。梦瑶&…

ACM训练题:互不侵犯

一看数据范围&#xff0c;如果是枚举所有的棋盘情况&#xff0c;2^K&#xff0c;肯定超了&#xff0c;自然是要一行一行递推&#xff0c;而相邻这个情况用位运算会比较方便&#xff0c;所以用状压dp。 具体算法&#xff1a;dp[i][j][k]表示第i行&#xff0c;前i行有j个棋子&…

P5440 【XR-2】奇迹 (大模拟dfs+欧拉筛板子+闰年)

传送门https://www.luogu.com.cn/problem/P5440 相信奇迹的人&#xff0c;本身就和奇迹一样了不起。——笛亚 《星游记》 思路历程&#xff1a;很离谱的一题&#xff0c;在理论上并不困难&#xff0c;只要简单dfs欧拉筛就能过。在一开始&#xff0c;我采用了倒着模拟的思路&am…