關于H5在安卓ios平臺兼容性問題悍赢,及解決方案

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; 
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末臊旭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子箩退,更是在濱河造成了極大的恐慌离熏,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件戴涝,死亡現(xiàn)場離奇詭異滋戳,居然都是意外死亡,警方通過查閱死者的電腦和手機啥刻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門奸鸯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人可帽,你說我怎么就攤上這事娄涩。” “怎么了蘑拯?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵钝满,是天一觀的道長兜粘。 經(jīng)常有香客問我申窘,道長,這世上最難降的妖魔是什么孔轴? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任剃法,我火速辦了婚禮,結果婚禮上路鹰,老公的妹妹穿的比我還像新娘贷洲。我一直安慰自己,他們只是感情好晋柱,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布优构。 她就那樣靜靜地躺著,像睡著了一般雁竞。 火紅的嫁衣襯著肌膚如雪钦椭。 梳的紋絲不亂的頭發(fā)上拧额,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機與錄音彪腔,去河邊找鬼侥锦。 笑死,一個胖子當著我的面吹牛德挣,可吹牛的內容都是我干的恭垦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼格嗅,長吁一口氣:“原來是場噩夢啊……” “哼番挺!你這毒婦竟也來了?” 一聲冷哼從身側響起屯掖,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤建芙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后懂扼,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體禁荸,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年阀湿,在試婚紗的時候發(fā)現(xiàn)自己被綠了赶熟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡陷嘴,死狀恐怖映砖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情灾挨,我是刑警寧澤邑退,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站劳澄,受9級特大地震影響地技,放射性物質發(fā)生泄漏。R本人自食惡果不足惜秒拔,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一莫矗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砂缩,春花似錦作谚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至双吆,卻和暖如春眨唬,著一層夾襖步出監(jiān)牢的瞬間滔悉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工单绑, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留回官,地道東北人。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓搂橙,卻偏偏與公主長得像歉提,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子区转,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內容

  • 日精進打卡第106天 姓名:黃芝艷 企業(yè)名稱 寧波貝泰燈具有限公司 組別 444期努力1組學員/第456期利他二組...
    IvyHuang黃芝艷閱讀 193評論 0 0
  • 家里有個消耗型負能量親戚苔巨,他是我的舅舅,從小到大都由我爸媽照顧废离,他脾氣不好侄泽,還沒什么本事,但往往會指派我爸媽干這干...
    麥太和肉安閱讀 187評論 0 3
  • 今年目標:健康管理(早睡11點之前蜻韭、飲食悼尾、體重) 藍色ATENZA 找到一位合作伙伴 今日青蛙:1.閱讀。2.聽音...
    鎮(zhèn)星Aquarius閱讀 143評論 0 0
  • 最壯麗肖方,也最悲涼 就像那無限好的夕陽闺魏, 因為黃昏必將把燦爛化作, 悄悄然的滅亡 就比如斯巴達三百勇士的戰(zhàn)場俯画, 破碎...
    林軒舉閱讀 484評論 0 4
  • 培訓課抄寫日語被發(fā)現(xiàn)了??尷尬死了?? 9.30-10.2析桥,背單詞40個 抄寫數(shù)字、時間艰垂、親屬 老師布置第三課泡仗、第四課作業(yè)
    上鑫閱讀 245評論 0 0