安卓/ios兼容问题及处理（小程序/H5）

自建博客文章链接：http://www.heblogs.cn/articleDetails/60fee38dc1e4a0695c1f8a7d

1. 微信小程序中new Date()转换时间时间格式时IOS不兼容的问题

问题：然后利用new Date() 转换时间戳时，使用微信开发工具、安卓都没问题，ios中无法展示并报错 “invalid date”。
原因：IOS系统及 Safari 不支持YYYY-DD-MM时间格式
解决办法： var d = new Date(TokenEndDate.replace(/-/g, “/”)) // 格式化时间

2. IOS机型margin属性无效问题

问题： 底部footer设置margin属性的时候发现真机IOS上无效，在微信开发者工具/安卓手机/谷歌iphone/安卓机型皆正常
原因： iOS8后，UIView 有个属性 var layoutMargins: UIEdgeInsets ， 如果一个View是ViewController的rootview，系统会自动设置和管理margins ， top和bottom margins被设置为0pt，left和right的值根据当前的 size class （文末简单介绍一下size class）不同而不同，可能取值为16或者20pt(iPhone6 plus, iPad)，你不能修改这些值
解决办法： footer底部加空div给height

3. input输入框在ios中光标及字体不居中

问题： input输入框在ios中光标及字体不居中

原因： 使用line-height垂直居中。

解决办法： 给input设置lineline-height来让输入内容居中或者上下偏移是不可取的，推荐使用padding撑开高度

input{
	padding:30rpx;
	&::placeholder {
      font-size: 14px;
      letter-spacing: 0.67px;
      color: #fff;
     }
}

4. m3u8视频格式，ios不能播放，安卓正常

问题 ：video 视频格式m3u8,在ios里边儿不能播放，但是安卓能正常播放

原因：xxx

解决办法： 添加 custom-cache={{cache}} ,data 中添加 cache:false即可

   <video src="{{sbDress}}" controls custom-cache="{{cache}}"></video>

5. 安卓/IOS图片卡顿异形

问题 ：安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小

原因： image组件默认宽度300px、高度225px

解决办法： 使用image 标签，尽量固定宽高。

6. ios 表单元素 input 和textarea 默认有内阴影（H5）

 input{  -webkit-appearance: none; } 

7. 键盘弹出异常

问题： ios上键盘弹出会将页面往上顶 安卓显示正常

原因： ios上的软键盘会使页面的fixed定位失效。

解决办法： 可以监听resize事件（浏览器窗口大小调整时触发），当键盘弹出的时候，更改页面的position属性值。

let myFunction
let isIos = true
if (isIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
    document.body.addEventListener('focusin', () => { // 软键盘弹起事件
      clearTimeout(myFunction)
    })
    document.body.addEventListener('focusout', () => { // 软键盘关闭事件
	  clearTimeout(myFunction)
      myFunction = setTimeout(function() {
        window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点  =======当键盘收起的时候让页面回到原始位置
      }, 200)
   })
}

​8. 安卓ios滑动 兼容问题

 -webkit-overflow-scrolling: touch; 

9. 安卓ios打开相机选择相册

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
    //获取浏览器的userAgent,并转化为小写
    var ua = navigator.userAgent.toLowerCase();
    //判断是否是苹果手机，是则是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

10. ios安全区域适配

问题： 部分页面内自己手写的底部tabbar会被黑线挡住内容

原因： IPhone安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Homendicator)的影响。

解决办法：

# wx.setStorageSync获取机型
# wx.getSystemInfo 对比screenHeight和safeArea.bottom
# css函数env()、constant()适配