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
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
// 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;