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

最后,👏👏 😀😀😀 👍👍     

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

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

相关文章

jQuery前段开发--星级评价和图形跟随指针移动

一、实验原理&#xff1a; 当鼠标移入某个星星&#xff0c;前面的星星都会被点亮&#xff1b;当鼠标移出&#xff0c;星星将会变暗&#xff0c;单击某个星星后&#xff0c;即可完成评论&#xff0c;此时鼠标移出后&#xff0c;被单击星星前面的星星都会被点亮&#xff0c;后面…

幻兽帕鲁社区服务器搭建架设开服教程(LINUX)

幻兽帕鲁社区服务器搭建架设开服教程&#xff08;LINUX&#xff09; 大家好我是艾西&#xff0c;上一期我给大家分享了windows系统版本的幻兽帕鲁服务器搭建教程。因为幻兽帕鲁这游戏对于服务器的配置有一定的要求很多小伙伴就思考用linux系统搭建的话占用会不会小一点&#x…

华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书

2024年1月25日&#xff0c;中国人工智能产业发展联盟智能化软件工程工作组&#xff08;AI for Software Engineering&#xff0c;下文简称AI4SE&#xff09;在京召开首届“AI4SE创新巡航”活动。在活动上&#xff0c;华为云大模型辅助系统测试代码生成荣获“2023AI4SE银弹优秀案…

代码随想录算法训练营第二十四天| 77. 组合。

77. 组合 题目链接&#xff1a;组合 题目描述&#xff1a; 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 解题思路&#xff1a; 本题是经典的回溯法解决的组合问题&#xff0c;回溯问题搞清楚纵向递归横向遍历即…

混乱字母排序——欧拉路数论

题目描述 小明接到一个神秘的任务&#xff1a;对于给定的 n 个没有顺序的字母对&#xff08;无序代表这两个字母可以前后顺序颠倒&#xff0c;区分大小写&#xff09;。请构造一个有 (n1) 个字母的混乱字符串使得每个字母对都在这个字符串中出现。 输入输出格式 输入格式 第…

KVM虚拟机MAC地址冲突,引发服务器对xshell说:Go away!

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 开场白 最近在机房的服务器上装kvm虚拟主机。 不经意间&#xff0c;上演了一场由MAC地址异常而引发的服务器与xshell之间的血案…

宠物商业数据分析

一、宠物热销品类分布 欧睿国际更有一份数据表明&#xff0c;宠物食品在所有“它经济”中占比是最大&#xff0c;仅仅是猫狗食品就达到了59.1%&#xff0c;增速也远高于其他宠物用品。 2018年&#xff0c;中国就已经有超7700万独居成年人口&#xff0c;国内养宠主力军中90后占…

c++阶梯之auto关键字与范围for

auto关键字&#xff08;c11&#xff09; 1. auto关键字的诞生背景 随着程序的逐渐复杂&#xff0c;程序代码中用到的类型也越来越复杂。譬如&#xff1a; 类型难以拼写&#xff1b;含义不明确容易出错。 比如下面一段代码&#xff1a; #include <string> #include &…

nginx无法启动,win10占用80端口 (注册表方式解决)

参考&#xff1a;https://blog.csdn.net/qq_39523111/article/details/128853509 改为4 重启后 不再占用 pid 不是4了 已经变为nginx了 改为0 没起作用 发现 80端口还是被 4占用 可以 把 服务中的 SQL Server Reporting Services关掉

2024年美赛B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…

【疑问】为什么声明和定义要分离

前言 我们在学习的时候接触过一个话&#xff1a;编写自定义函数的时候 要做到声明和定义分离 那么为什么呢 今天就来简单的了解一下 疑问&#xff1a;错误的发生 下面给出两个源文件和一个头文件以及报错信息 text.cc文件 #include"head.h"int main() {int a 1…

Pytroch 自写训练模板适合入门版 包含十五种经典的自己复现的一维模型 1D CNN

训练模板 在毕业之前&#xff0c;决定整理一下手头的代码&#xff0c;自己做1D-CNN这吗久&#xff0c;打算开源一下自己使用的1D-CNN的代码&#xff0c;包括用随机数生成一个模拟的数据集&#xff0c;到自己写的一个比较好的适合入门的基础训练模板&#xff0c;以及自己复现的…

2020年CSP-J认证 CCF非专业级别软件能力认证第一轮真题--完善程序题

2020 CCF认证第一轮&#xff08;CSP-J&#xff09;真题 三、完善程序题 第一题 质因数分解 给出正整数n&#xff0c;请输出将n质因数分解的结果&#xff0c;结果从小 到大输出。 例如&#xff1a;输入n120程序应该输出2 2 2 3 5,表示1202 X 2 X 2 X 3 X 5输入保2≤n≤10^9提…

个人建站前端篇(二)项目采用服务端渲染SSR

SSR的优点 更好的SEO首屏加载速度更快&#xff0c;用户体验更好可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用&#xff0c;而不需要在后端模板系统和前端框架之间来回切换。 Vue生态中的SSR通用解决方案 Nuxt是一个构建于 Vue 生态系统之上的全栈框…

springboot 整合 PowerJob实现定时任务调度

最近项目需要使用定时任务&#xff0c;而使用了PowerJob做任务调度模块&#xff0c;感觉这个框架真香&#xff0c;今天我们就来深入了解一下新一代的定时任务框架——PowerJob&#xff01; 简介 PowerJob是基于java开发的企业级的分布式任务调度平台&#xff0c;与xxl-job一样…

10个React状态管理库推荐

本文将为您推荐十款实用的React状态管理库&#xff0c;帮助您打造出高效、可维护的前端应用。让我们一起看看这些库的魅力所在&#xff01; 在前端开发中&#xff0c;状态管理是至关重要的一环。React作为一款流行的前端框架&#xff0c;其强大的状态管理功能备受开发者青睐。…

2.2学习总结

2.2 1.⼀和零 2.零钱兑换II 3.组合总和 Ⅳ 4.零钱兑换 5.完全平⽅数 6.封印 7.杨辉三角形 8.卡牌 9.最大子段和 题1&#xff1a;https://leetcode.cn/problems/ones-and-zeroes/description/ 01背包问题&#xff0c;其中m&#xff0c;n分别是背包的容量&#xff0c;s字符串中…

力扣hot100 二叉树的右视图 DFS BFS 层序遍历 递归

Problem: 199. 二叉树的右视图 文章目录 思路&#x1f496; BFS&#x1f496; DFS 思路 &#x1f469;‍&#x1f3eb; 甜姨 &#x1f496; BFS ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) class Solution {public List<Integer&…

NFT Insider #119:The Sandbox 举办VoxEdit 战士装备设计比赛,周星驰 Nobody NFT开启铸造

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members &#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜…

【Android】高仿京东三级类型列表Demo

本demo基于二级分类双列表联动Demo进行了改进&#xff0c;高仿实现了京东的三级类型列表。 京东的如图&#xff1a; 本demo的&#xff1a; 改进之处 实现了三级列表联动&#xff0c;二三级列表之间的滑动监听优化了一下&#xff0c;将二级类型选中交予自身的点击事件&#…