java h5平台无关性_关于H5在安卓ios平台兼容性问题，及解决方案

ios兼容问题

1.ios 表单元素 有内部阴影

解决方案

// css

input{

-webkit-appearance: none;

}

2.ios input 调用键盘屏幕上移后，失去焦点不自动回落

解决方案

//js

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)

})

}

3.ios下不兼容keyup,keydown等事件：

解决方案

//js

document.getElementById('testautofocus').addEventListener('input', function(e){ });

4.IOS/safari设备上，接口返回日期为字符串格式「 yyyy-MM-dd hh:mm:ss」, 经过new Date(str)后会出现NAN

解决方案

// 正则 将 - 转为 / .replace(/-/g,'/')

let dateStr = '2019-09-09 10:11:11'

let dateNum = new Date(dateStr.replace(/-/g,'/')).getTime()

console.log(dateNum) // 时间戳

5.ios系统手机打开相机并可选择相册功能

解决方案 capture(调用设备媒体)

capture 属性：在webapp上使用 input 的 file 属性，指定 capture 属性可以调用系统默认相机、摄像和录音功能。

capture表示，可以捕获到系统默认设备的媒体信息，如下：

capture="camera" 相机

capture="camcorder" 摄像机

capture="microphone"录音

// html

// js

$(function () {

//获取浏览器的userAgent,并转化为小写

var ua = navigator.userAgent.toLowerCase();

//判断是否是苹果手机，是则是true

var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

if (isIos) {

$("input:file").removeAttr("capture");

};

})

安卓兼容问题

1.滑动不流畅问题，这个滑动不流畅好像局限于局部的滚动，建议都写成 全局滚动

解决方案

//css

-webkit-overflow-scrolling: touch;