移动端兼容性问题集锦
前言
去年主要工作就是混合开发，写app内嵌的h5。在开发期间多多少少遇到些兼容性问题，最近工作比较清闲，整理下方便以后查阅，也希望能帮助到一些同学。
并且本文会持续补充内容，欢迎关注我，另外我会更新一些前端方面的其他一些知识。
1. ios端 new Date() 问题
问题描述： ios规定日期要以“ / ”分割，而不能用“ - ”。
比如在ios：new Date('2023-01-01 00:00:00') 会返回NaN（在pc端safari是Invalid Date）
解决办法： 改用“/”分割，例如：new Date('2023/01/01 00:00:00')
**替换字符串： **new Date(“2023-01-01 00:00:00”).replace(/-/g, “/”);
2. ios端 h5返回不刷新页面
问题描述： ios端打开h5页面后，从a页面跳转到b页面，然后再返回a页面之后，发现a页面没有刷新。貌似是ios会在浏览网页后生成一个类似快照的东西，当返回时，直接调用这个快照进行展示，从而提高性能。安卓手机的h5返回时都会刷新，ios好像是部分机型也会刷新。
但是如果我们需要在返回时重新获取下最新的信息，这个机制就会存在bug。
解决办法：
//pageshow里的 persisted 属性 表示该页面是否从浏览器缓存中读取。
window.addEventListener('pageshow', function (event) { if (event.persisted) { //重载页面或者刷新数据}
});
3. 移动端媒体自动播放
问题描述： 安卓和ios对媒体的自动播放都有不同的限制要求。比如ios要求至少要有一次交互才能开始播放。
解决办法：\
- 在微信环境内可以利用微信的api（微信内置浏览器的私有对象WeixinJSBridge）实现自动播放
- 其他环境下，为了保证兼容性，一般最好有个缓冲页面，用来加载资源，并提示用户点击开始播放。
var audio = document.getElementById(id)
document.addEventListener("touchstart",play, false);
play = function(){audio.play();document.removeEventListener("touchstart",play, false);
};
audio.play();//兼容微信
document.addEventListener("WeixinJSBridgeReady", function () {play();
}, false);
4. ios端 点击事件有300秒延迟
问题描述： 由于早期iphone设计了双击放大的功能，所以要判断用户操作是单机还是双击，所以做了300ms的延迟判断。
解决办法：\
- 设置不能缩放：
user-scalable=no或者设置显示宽度：width=device-width(常用，简单快捷）
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
- 使用fastclick库
window.addEventListener("load",function () {FastClick.attach(document.body);
},false);- 使用touchstart事件代替click事件
5. 安卓端 底部按钮在调用输入法时被顶起来
问题描述： 在安卓端，用absolute/fixed将一个按钮固定在页面底部时，如果调用输入法，这个按钮也会被输入框顶起来
解决办法： 使用媒体查询，在页面高度小于某值时，设置元素top值
@meida screen and (max-height: 400px) {}
6. 移动端 键盘遮挡输入框问题
问题描述： 当输入框固定在最底部，点击输入框调起输入法的软键盘后输入框会被遮挡。
解决办法： \
- 如果你的底部输入框是用fixed定位固定在下方的，一般不会出现这问题，如果出现了，可以考虑监听网页resize事件或者输入框focus事件，动态修改输入框位置；
- 如果是用absolute或者relative实现的，可能是你最外层的盒子高度写死了。
- 使用scrollIntoView方法将输入框滚动到可视区域document.getElementById(‘inputId’).scrollIntoView();
7. 移动端 1px 边框变粗
问题描述： 在移动端给元素设置1px的边框时，总是感觉好像不止1像素？好像被加粗了？了解原因
解决办法：
div{position: relative;border:none;}div:after{content: '';position: absolute;top: 0;left: 0;border: 1px solid #000;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;}
8. ios端 无滚动惯性
问题描述： 在ios端，使用了absolute布局之后，会发现元素内的滚动非常不流畅，滑动的手指松开后，滚动会立刻停止，没有滚动惯性。
解决办法：
-webkit-overflow-scrolling: touch;
9. 禁止 ios 弹出各种操作窗口
-webkit-touch-callout:none
10. 禁止 ios 识别长串数字为电话
问题描述： 在ios端，会把数字识别成电话号码，导致增加超链接样式并且可以点击拨打
解决办法：
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
11. ios端 输入框聚焦出现阴影
问题描述： 在ios端，input输入框在聚焦的时候，有时候会出现outline或者阴影，安卓则是显示正常的。
解决办法：
input:focus{outline:none} input:{-webkit-appearance: none;}
12. ios 端search类型的输入框自带搜索图标
问题描述： ios 15以上的版本，search类型的输入框会自带图标
解决办法：
我们可以用css将其隐掉:
input[type="search"]{-webkit-appearance:none;}[type="search"]::-webkit-search-decoration { display: none; }input::-webkit-search-cancel-button {display: none;}13.ios端 swiper轮播图设置圆角，滑动时会先变成直角再变回圆角
解决办法：
在父盒子上加下面css：
overflow:hidden；transform:translateY(0)；
14. 安卓端 部分机型点击图片会放大
img{ pointer-events:none; }