移动端兼容性问题集锦

前言

去年主要工作就是混合开发，写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要求至少要有一次交互才能开始播放。
解决办法：\

1. 在微信环境内可以利用微信的api（微信内置浏览器的私有对象WeixinJSBridge）实现自动播放
2. 其他环境下，为了保证兼容性，一般最好有个缓冲页面，用来加载资源，并提示用户点击开始播放。

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的延迟判断。
解决办法：\

1. 设置不能缩放：user-scalable=no或者设置显示宽度：width=device-width (常用，简单快捷）

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

2. 使用fastclick库

window.addEventListener("load",function () {
    FastClick.attach(document.body);
},false);

3. 使用touchstart事件代替click事件

5. 安卓端 底部按钮在调用输入法时被顶起来

问题描述： 在安卓端，用absolute/fixed将一个按钮固定在页面底部时，如果调用输入法，这个按钮也会被输入框顶起来
解决办法： 使用媒体查询，在页面高度小于某值时，设置元素top值
@meida screen and (max-height: 400px) {}

6. 移动端 键盘遮挡输入框问题

问题描述： 当输入框固定在最底部，点击输入框调起输入法的软键盘后输入框会被遮挡。
解决办法： \

1. 如果你的底部输入框是用fixed定位固定在下方的，一般不会出现这问题，如果出现了，可以考虑监听网页resize事件或者输入框focus事件，动态修改输入框位置；
2. 如果是用absolute或者relative实现的，可能是你最外层的盒子高度写死了。
3. 使用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;  
    }