ios兼容問題
1.ios 表單元素 有內部陰影
解決方案
// css
input{
-webkit-appearance: none;
}
2.ios input 調用鍵盤屏幕上移后向抢,失去焦點不自動回落
解決方案
//js
let myFunction
let isIos = true
if (isIos) { // 既是微信瀏覽器 又是ios============(因為查到只有在微信環(huán)境下寒跳,ios手機上才會出現(xiàn)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」, 經(jīng)過new Date(str)后會出現(xiàn)NAN
解決方案
// 正則 將 - 轉為 / .replace(/-/g,'/')
let dateStr = '2019-09-09 10:11:11'
let dateNum = new Date(dateStr.replace(/-/g,'/')).getTime()
console.log(dateNum) // 時間戳
5.ios系統(tǒng)手機打開相機并可選擇相冊功能
解決方案 capture(調用設備媒體)
capture 屬性:在webapp上使用 input 的 file 屬性,指定 capture 屬性可以調用系統(tǒng)默認相機朦促、攝像和錄音功能膝晾。
capture表示,可以捕獲到系統(tǒng)默認設備的媒體信息务冕,如下:
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;