微信小程序 安卓/IOS兼容问题
一、背景
在开发微信小程序时,不同的手机型号会出现兼容问题,特此记录一下
二、安卓/IOS兼容问题总结
2.1、new Date()时间转换格式时,IOS不兼容
问题:在安卓中时间格式2024-1-31 10:10:10,但是在iOS中是不支持 "-" 作为日期分隔符
原因:IOS系统及 Safari 不支持YYYY-DD-MM时间格式
解决:将日期中的"-",替换为"/"
let time = new Date('2022-12-13 19:00'.replace(/-/g,'/'))
2.2、图片格式展示问题
问题:.webp 格式图片在 ios 设备上无法正常显示
原因:IOS系统的原生浏览器Safari不支持.webp格式
解决:将 webp 的后缀名替换为 jpg或png 的后缀名
img.replace(/\.webp/,'.jpg')
2.3、IOS机型margin属性无效
问题:底部footer设置margin属性时,IOS无效
原因:iOS8后,UiView有个属性 var layoutMargins:UIEdgeinsets,如果一个View是ViewController的rootview,系统会自动设置和管理margins , top和bottom margins被设置为0pt,left和right的值根据当前的 size class 不同而不同,可能取值为16或者20pt(iPhone6 plus, iPad),你不能修改这些值
解决:底部footer加个空盒子div,给height值
2.4、IOS安全区域适配
问题:在IOS设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况
解决:两种方法
方法一:使用微信官方API,wx.getSystemInfo()中的safeArea对象进行适配
# wx.getSystemInfo 对比screenHeight和safeArea.bottom
如果是需要适配的机型,使用safeArea中的bottom,得到安全区域底部纵坐标,然后使用screenHeight减去bottom就能得到小黑条的高度。保存到localstorage里面,全局都可以使用。
方法二:使用苹果官方推出的css函数env()、constant()适配
# css函数env()、constant()适配
env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:
safe-area-inset-left:安全区域距离左边边界的距离
safe-area-inset-right:安全区域距离右边边界的距离
safe-area-inset-top:安全区域距离顶部边界的距离
safe-area-inset-bottom :安全距离底部边界的距离
因为目标是需要对底部小黑条做适配,所以只需要关注safe-area-inset-bottom这个值。
在做屏幕适配时可以这么写
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
2.5、input输入框在ios中光标及字体不居中
问题:input输入框在ios中光标及字体不居中
原因:iOS 的自动校验功能会对输入内容进行格式化,导致文本显示位置发生偏移。
解决:两种方法
方法一:禁用自动校验功能:将 input 的 type 属性设置为 text 可以禁用 iOS 的自动校验功能,从而解决光标和文本不居中的问题。
方法二:使用 CSS 样式:通过设置 input 的 padding 和 font-size 属性,可以让输入框中的文本垂直居中和水平居中。
input {padding: 10px 0; /* 垂直居中 */font-size: 16px; /* 字体大小 */
}
2.6、iOS使用overflow:auto;滚动会卡顿
解决:-webkit-overflow-scrolling: touch
最后,👏👏 😀😀😀 👍👍

相关文章:
微信小程序 安卓/IOS兼容问题
一、背景 在开发微信小程序时,不同的手机型号会出现兼容问题,特此记录一下 二、安卓/IOS兼容问题总结 2.1、new Date()时间转换格式时,IOS不兼容 问题:在安卓中时间格式2024-1-31 10:10:10,但是在iOS中是不支持 &q…...
结构体--共用体--枚举 之难点——链表 奋力学习嵌入式的第十六天
结构体 注意: 1.结构体类型 可以定义在 函数里里面 但是此时作用域就被限定在该函数中 2.结构体定义形式 //形式一 限定一类型 后定义变量 struct stu { ... }; struct stu s; //形式二 定义类型的同时 定义变量 struct stu { ... }s1,s2,*s3,s4[10]; struc…...
猜凶手
日本某地发生了一件谋杀案,警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说:不是我。 B说:是C。 C说:是D。 D说:C在胡说 已知3个人说了真话,1个人说的是假话。 现在请根据这…...
python-自动化篇-运维-实现读取日志文件最后一行的时间
文章目录 1. 使用Python打开日志文件2.python读取文件最后一行两种方式3.读取当前时间,进行两者相减,超时报警4.将内容推送到企业微信5. 关闭日志文件整体代码 1. 使用Python打开日志文件 在开始实时读取日志文件之前,我们首先需要打开一个日…...
QT SQL
QT SQL模块提供数据库编程的支持,支持多种常见的数据库:MySQL\Oracle\MS SQL Server\SQLite等。SQL模块包含多个类,可以实现:数据库连接、SQL语句执行、数据获取与界面显示 等功能。数据 与 界面间用Model\View架构。 一、 二、Q…...
C++(20):通过concept及nlohmann将数据转换为字符串
nlohmann可以自动兼容将C++的很多原生类型转换为json,甚至自定义类型也不需要太复杂的操作就可以转换为json,可以利用这一点将数据转换为string: #include <nlohmann/json.hpp> #include <string> #include <vector> #include <tuple> #include <…...
Transformer 自然语言处理(四)
原文:Natural Language Processing with Transformers 译者:飞龙 协议:CC BY-NC-SA 4.0 第十章:从头开始训练变换器 在本书的开头段落中,我们提到了一个名为 GitHub Copilot 的复杂应用,它使用类似 GPT 的…...
BRAIN :帕金森病中与痴呆相关的动态功能连接改变
fMRI成像手段由于其在高空间分辨率的优势获得了疾病研究的青睐,越来越多的疾病研究使用fMRI手段来通过找到特异的神经标记物从而提升临床治疗的诊断效力以及准确率。但是,功能磁共振受到其时间分辨率相对较低这一缺点的影响,在对疾病时间特异…...
harmony os系统
因为实验室配的是Windows电脑,最近在搜索marginnote有没有windows的版本,不然好多功能相似的软件在使用不能信息同步是挺麻烦的。搜索结果当然还是没有对应版本。那我退而求其次,看看怎么在Windows上使用marginnote,结果大家意见基…...
2024美赛数学建模A题思路源码——七鳃鳗性别比例和生态系统关系
赛题目的:分析一个物种根据资源可用性改变其性别比例的能力的利弊。开发一个模型,分析对生态系统中由此产生的相互作用。 问题一.七鳃鳗性别比例对生态系统的影响 问题分析 建立一个简化版的模型,来探讨以下问题: 1.我们假设七鳃鳗种群的增长遵循Logistic生长模型,其中食…...
C语言的基础学习
C语言的变量 ## C语言中的变量 在C语言中,变量是对程序中数据所占内存空间的一种抽象定义。定义变量时,用户定义变量的名、变量的类型,这些都是变量的操作属性。不仅可以通过变量名访问该变量,系统还通过该标识符确定变量在内存中的位置 [❷](https://www.dotcpp.com/cour…...
PostGIS教程学习二十二:使用触发器追踪历史编辑操作
PostGIS教程学习二十二:使用触发器追踪历史编辑操作 生产环境下数据库的一个常见要求是能够跟踪用户编辑数据的历史:数据在两个日期之间是如何变化的,是谁操作的,以及它们哪些内容变化了?一些GIS系统通过在客户端接口…...
【PTA浙大版《C语言程序设计(第4版)》编程题】练习7-4 找出不是两个数组共有的元素(附测试点)
目录 输入格式: 输出格式: 输入样例: 输出样例: 代码呈现 测试点 给定两个整型数组,本题要求找出不是两者共有的元素。 输入格式: 输入分别在两行中给出两个整型数组,每行先给出正整数N(≤20),随后是N个整数&a…...
C++面试:数据库不同存储引擎的区别以及如何选择
目录 基础 具体选择原则 Mysql如何选择 创建表时指定存储引擎 修改现有表的存储引擎 查看表的存储引擎 注意事项 总结 在数据库管理系统中,不同的存储引擎提供了不同的存储机制、索引技术、锁定水平和其他功能。以MySQL为例,它支持多种存储引擎&…...
HTML -- 常用标签
目录 HTML 标签 单标签 双标签 常见标签的使用 标题和段落 换行、分隔、超链接 列表标签 表单标签 属性 属性的使用 HTML HTML(Hyper Text Markup Language),超文本标记语言,是一门标记语言,不是编程语言&am…...
【Qt】QInputDialog setGeometry: Unable to set geometry 问题
【Qt】QInputDialog setGeometry: Unable to set geometry 问题 文章目录 I - 问题背景II - 解决办法III - 参考链接 I - 问题背景 创建了一个 QMainWindow 并在上边创建了布局,尝试调用 QInputDialog 的 getInt 静态方法,结果运行时出现了以下警告 QW…...
Flink问题解决及性能调优-【Flink rocksDB读写state大对象导致背压问题调优】
RocksDB是Flink中用于持久化状态的默认后端,它提供了高性能和可靠的状态存储。然而,当处理大型状态并频繁读写时,可能会导致背压问题,因为RocksDB需要从磁盘读取和写入数据,而这可能成为瓶颈。 遇到的问题 Flink开发…...
代码随想录算法训练营第二十四天|● 理论基础 ● 77. 组合
仅做学习笔记,详细请访问代码随想录 ● 理论基础 ● 77. 组合 ● 理论基础 回溯法解决的问题 回溯法,一般可以解决如下几种问题: 组合问题:N个数里面按一定规则找出k个数的集合 切割问题:一个字符串按一定规则有几…...
买保险如何填健康告知
在投保健康险时,保险公司都有健康告知这一环,那么健康告知怎么机智的填? 人都吃五谷杂粮,身体免不了有各种小毛病,比如甲状腺结节等,健康告知通过不了怎么办? 健康告知是保险公司设计的健康问…...
云贝教育 | 【技术文章】Oracle 19c RAC修改网络
注: 本文为云贝教育 刘峰 原创,请尊重知识产权,转发请注明出处,不接受任何抄袭、和未经注明出处的转载。 原文链接:【Oracle 19c】Oracle 19c RAC修改网络 - 课程体系 - 云贝教育 (yunbee.net) 变更目标 ip类型 节点 原IP 目…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
