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

微信小程序 安卓/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兼容问题

一、背景 在开发微信小程序时&#xff0c;不同的手机型号会出现兼容问题&#xff0c;特此记录一下 二、安卓/IOS兼容问题总结 2.1、new Date()时间转换格式时&#xff0c;IOS不兼容 问题&#xff1a;在安卓中时间格式2024-1-31 10:10:10&#xff0c;但是在iOS中是不支持 &q…...

结构体--共用体--枚举 之难点——链表 奋力学习嵌入式的第十六天

结构体 注意&#xff1a; 1.结构体类型 可以定义在 函数里里面 但是此时作用域就被限定在该函数中 2.结构体定义形式 //形式一 限定一类型 后定义变量 struct stu { ... }; struct stu s; //形式二 定义类型的同时 定义变量 struct stu { ... }s1,s2,*s3,s4[10]; struc…...

猜凶手

日本某地发生了一件谋杀案&#xff0c;警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说&#xff1a;不是我。 B说&#xff1a;是C。 C说&#xff1a;是D。 D说&#xff1a;C在胡说 已知3个人说了真话&#xff0c;1个人说的是假话。 现在请根据这…...

python-自动化篇-运维-实现读取日志文件最后一行的时间

文章目录 1. 使用Python打开日志文件2.python读取文件最后一行两种方式3.读取当前时间&#xff0c;进行两者相减&#xff0c;超时报警4.将内容推送到企业微信5. 关闭日志文件整体代码 1. 使用Python打开日志文件 在开始实时读取日志文件之前&#xff0c;我们首先需要打开一个日…...

QT SQL

QT SQL模块提供数据库编程的支持&#xff0c;支持多种常见的数据库&#xff1a;MySQL\Oracle\MS SQL Server\SQLite等。SQL模块包含多个类&#xff0c;可以实现&#xff1a;数据库连接、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 自然语言处理(四)

原文&#xff1a;Natural Language Processing with Transformers 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十章&#xff1a;从头开始训练变换器 在本书的开头段落中&#xff0c;我们提到了一个名为 GitHub Copilot 的复杂应用&#xff0c;它使用类似 GPT 的…...

BRAIN :帕金森病中与痴呆相关的动态功能连接改变

fMRI成像手段由于其在高空间分辨率的优势获得了疾病研究的青睐&#xff0c;越来越多的疾病研究使用fMRI手段来通过找到特异的神经标记物从而提升临床治疗的诊断效力以及准确率。但是&#xff0c;功能磁共振受到其时间分辨率相对较低这一缺点的影响&#xff0c;在对疾病时间特异…...

harmony os系统

因为实验室配的是Windows电脑&#xff0c;最近在搜索marginnote有没有windows的版本&#xff0c;不然好多功能相似的软件在使用不能信息同步是挺麻烦的。搜索结果当然还是没有对应版本。那我退而求其次&#xff0c;看看怎么在Windows上使用marginnote&#xff0c;结果大家意见基…...

2024美赛数学建模A题思路源码——七鳃鳗性别比例和生态系统关系

赛题目的:分析一个物种根据资源可用性改变其性别比例的能力的利弊。开发一个模型,分析对生态系统中由此产生的相互作用。 问题一.七鳃鳗性别比例对生态系统的影响 问题分析 建立一个简化版的模型,来探讨以下问题: 1.我们假设七鳃鳗种群的增长遵循Logistic生长模型,其中食…...

C语言的基础学习

C语言的变量 ## C语言中的变量 在C语言中,变量是对程序中数据所占内存空间的一种抽象定义。定义变量时,用户定义变量的名、变量的类型,这些都是变量的操作属性。不仅可以通过变量名访问该变量,系统还通过该标识符确定变量在内存中的位置 [❷](https://www.dotcpp.com/cour…...

PostGIS教程学习二十二:使用触发器追踪历史编辑操作

PostGIS教程学习二十二&#xff1a;使用触发器追踪历史编辑操作 生产环境下数据库的一个常见要求是能够跟踪用户编辑数据的历史&#xff1a;数据在两个日期之间是如何变化的&#xff0c;是谁操作的&#xff0c;以及它们哪些内容变化了&#xff1f;一些GIS系统通过在客户端接口…...

【PTA浙大版《C语言程序设计(第4版)》编程题】练习7-4 找出不是两个数组共有的元素(附测试点)

目录 输入格式: 输出格式: 输入样例: 输出样例: 代码呈现 测试点 给定两个整型数组&#xff0c;本题要求找出不是两者共有的元素。 输入格式: 输入分别在两行中给出两个整型数组&#xff0c;每行先给出正整数N&#xff08;≤20&#xff09;&#xff0c;随后是N个整数&a…...

C++面试:数据库不同存储引擎的区别以及如何选择

目录 基础 具体选择原则 Mysql如何选择 创建表时指定存储引擎 修改现有表的存储引擎 查看表的存储引擎 注意事项 总结 在数据库管理系统中&#xff0c;不同的存储引擎提供了不同的存储机制、索引技术、锁定水平和其他功能。以MySQL为例&#xff0c;它支持多种存储引擎&…...

HTML -- 常用标签

目录 HTML 标签 单标签 双标签 常见标签的使用 标题和段落 换行、分隔、超链接 列表标签 表单标签 属性 属性的使用 HTML HTML&#xff08;Hyper Text Markup Language&#xff09;&#xff0c;超文本标记语言&#xff0c;是一门标记语言&#xff0c;不是编程语言&am…...

【Qt】QInputDialog setGeometry: Unable to set geometry 问题

【Qt】QInputDialog setGeometry: Unable to set geometry 问题 文章目录 I - 问题背景II - 解决办法III - 参考链接 I - 问题背景 创建了一个 QMainWindow 并在上边创建了布局&#xff0c;尝试调用 QInputDialog 的 getInt 静态方法&#xff0c;结果运行时出现了以下警告 QW…...

Flink问题解决及性能调优-【Flink rocksDB读写state大对象导致背压问题调优】

RocksDB是Flink中用于持久化状态的默认后端&#xff0c;它提供了高性能和可靠的状态存储。然而&#xff0c;当处理大型状态并频繁读写时&#xff0c;可能会导致背压问题&#xff0c;因为RocksDB需要从磁盘读取和写入数据&#xff0c;而这可能成为瓶颈。 遇到的问题 Flink开发…...

代码随想录算法训练营第二十四天|● 理论基础 ● 77. 组合

仅做学习笔记&#xff0c;详细请访问代码随想录 ● 理论基础 ● 77. 组合 ● 理论基础 回溯法解决的问题 回溯法&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合 切割问题&#xff1a;一个字符串按一定规则有几…...

买保险如何填健康告知

在投保健康险时&#xff0c;保险公司都有健康告知这一环&#xff0c;那么健康告知怎么机智的填&#xff1f; 人都吃五谷杂粮&#xff0c;身体免不了有各种小毛病&#xff0c;比如甲状腺结节等&#xff0c;健康告知通过不了怎么办&#xff1f; 健康告知是保险公司设计的健康问…...

云贝教育 | 【技术文章】Oracle 19c RAC修改网络

注: 本文为云贝教育 刘峰 原创&#xff0c;请尊重知识产权&#xff0c;转发请注明出处&#xff0c;不接受任何抄袭、和未经注明出处的转载。 原文链接&#xff1a;【Oracle 19c】Oracle 19c RAC修改网络 - 课程体系 - 云贝教育 (yunbee.net) 变更目标 ip类型 节点 原IP 目…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...