当前位置: 首页 > 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 目…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...