html5兼容性問題的解決

作為html5開發(fā)人員常常面臨兼容性和新功能之間的抉擇襟铭,為了解決這一問題,我們會采取不同的方案锣笨,按照問題解決的遞進關系可以分為3步(避免問題和解決問題):1蝌矛,了解主流瀏覽器對于制定html5功能的支持情況,如果能夠得到期望的瀏覽器的支持错英,那么可以使用,否則不實用隆豹。在了解瀏覽器的支持情況后椭岩,還需要瀏覽器的裝機情況,這樣可以進一步了解目標用戶對于新功能是否有足夠的支持璃赡;2判哥,針對一臺具體的用戶電腦瀏覽器查詢特定的功能時候能夠被支持(所謂診斷),可以使用modernizr技術來解決碉考;3mo d針對診斷結果采取解決方案塌计,可以使用膩子腳本來解決(所謂醫(yī)治)。

1侯谁,了解瀏覽器的支持情況和瀏覽器在用戶中的使用情況

可以通過專門的統(tǒng)計網站caniuse來了解這些情況锌仅,

caniuse查詢首頁

簡單說明一下它的使用。上圖(caniuse首頁截圖)是網站內容墙贱,在綠框中輸入你所需要的html5新功能名字热芹,即可查詢對應的使用情況。

caniuse查詢結果

在查詢結果中可以看到各個主流瀏覽器的不同版本對于這個功能支持情況惨撇。值得注意的是國內一些瀏覽器大多是盒子瀏覽器伊脓,采用別人的瀏覽器內核。如QQ瀏覽器采用的IE內核(支持情況取決于你電腦上安裝的IE版本)魁衙,360瀏覽器采用的是chrome+IE瀏覽器雙核报腔,百度瀏覽器同樣是雙核株搔。具體版本可以通過到官網上進行查詢。這些瀏覽器會基于內核進行優(yōu)化纯蛾,所以不能簡單根據(jù)內核版本判斷支持情況邪狞,但內核版本可以作為充要條件。

2茅撞,通過modernizr進行瀏覽器功能檢測

通過modernizr可以判斷某一功能是否能夠被當前瀏覽器支持帆卓,modernizr是一個可以插入到你的網頁里面的js文件,通過調用內部的函數(shù)可以完成對當前瀏覽器的某一功能的檢驗米丘。使用方法如下:

1剑令,下載modernizr的js文件。2拄查,將文件放入到你的網頁所在的文件夾內吁津。3,在你的網頁的head標簽中加入對這個js文件的使用堕扶。4碍脏,編寫腳本執(zhí)行檢測功能,并將結果輸出到頁面中去稍算。

3典尾,通過膩子腳本來解決兼容性的問題。

我們已經可以通過modernizr來判斷某一功能能否被當前瀏覽器所支持糊探。但是這一結果不能幫助瀏覽器進行正確的現(xiàn)實為了解決這一問題钾埂,我們可以通過膩子腳本的方式來解決。針對不同html功能會有膩子腳本來解決科平,然而膩子腳本的的品質確不一能保證褥紫。這是膩子腳本的集合

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市瞪慧,隨后出現(xiàn)的幾起案子髓考,更是在濱河造成了極大的恐慌,老刑警劉巖弃酌,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氨菇,死亡現(xiàn)場離奇詭異,居然都是意外死亡矢腻,警方通過查閱死者的電腦和手機门驾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來多柑,“玉大人奶是,你說我怎么就攤上這事。” “怎么了聂沙?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵秆麸,是天一觀的道長。 經常有香客問我及汉,道長沮趣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任坷随,我火速辦了婚禮房铭,結果婚禮上,老公的妹妹穿的比我還像新娘温眉。我一直安慰自己缸匪,他們只是感情好,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布类溢。 她就那樣靜靜地躺著凌蔬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闯冷。 梳的紋絲不亂的頭發(fā)上砂心,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機與錄音蛇耀,去河邊找鬼辩诞。 笑死,一個胖子當著我的面吹牛蒂窒,可吹牛的內容都是我干的躁倒。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼洒琢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了褐桌?” 一聲冷哼從身側響起衰抑,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荧嵌,沒想到半個月后呛踊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡啦撮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年谭网,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赃春。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡愉择,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情锥涕,我是刑警寧澤衷戈,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站层坠,受9級特大地震影響殖妇,放射性物質發(fā)生泄漏。R本人自食惡果不足惜破花,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一谦趣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧座每,春花似錦前鹅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至延赌,卻和暖如春除盏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背挫以。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工者蠕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人掐松。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓踱侣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親大磺。 傳聞我的和親對象是個殘疾皇子抡句,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內容

  • 前言 轉自博客園 原文 一、簡單介紹一下什么是瀏覽器內核杠愧。瀏覽器最重要或者說核心的部分是“Rendering En...
    吳晗君閱讀 3,630評論 1 30
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理待榔,服務發(fā)現(xiàn),斷路器流济,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 關于這份調研報告锐锣,不是從技術角度深入探索,重點是從產品本身分析绳瘟,通俗易懂才是重點雕憔。主要是為了鍛煉平時做技術調研和競...
    石先閱讀 23,289評論 13 48
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 昨天是我們孩子在幼兒園上學的最后一天分瘦。下午去接孩子時,看到老師們忙碌的身影畅卓,老師讓大家拿好東西擅腰,讓孩子們最后一次在...
    顛儒癡閱讀 205評論 1 0