相容性常規檢測

2022-06-21 11:36:14 字數 2109 閱讀 7855

碰到檢查支援font-family的疑問,一時想不出,查了資料後解惑。順便在此對是否支援的檢測方式,進行一些基本的歸納。

瀏覽器並不會對 html 進行編譯,而是直接解析並顯示結果,並以寬鬆模式執行。即使用了錯誤的語法,瀏覽器通常都有內建規則來解析書寫錯誤的標記,頁面仍然可以顯示出來。對於比較新的標籤,大都會有對應的 js 物件可以進行檢測。

通過獲取style物件的某個屬性值是否為字串來判斷。

typeof document.body.style.width // string

typeof document.body.style.test // undefined

瀏覽器原生提供css物件裡面有個supports方法,用來檢測瀏覽器是否支援給定的 css 規則,返回布林值。

需要注意的是window.css這個物件並不是所有瀏覽器都支援。

window.css.supports("display: flex") // true

window.css.supports("display: test") // false

window.css.supports("display", "flex") // true

window.css.supports("display", "test") // false

modernizr 是乙個檢測是否支援 html5 和 css3 特性的庫。

back to top

可以建立乙個元素物件,然後檢查在該物件中,是否有對應的屬性。

function issupportevent(eventname) 

var element = document.createelement('div');

eventname = 'on' + eventname;

var issupport = boolean(eventname in element);

return issupport;

}

這類都在window物件上,直接獲取進行判斷。對於支援物件,但部分支援物件擁有的方法,類似方式進行判斷。

function issupportobject(objname) 

return boolean(window[objname]);

}

檢測字型的思路是:初始化乙個字串,設定通用字型,獲取其渲染寬度,然後設定需要檢測的字型,獲取渲染的寬度,比較兩個寬度,相同說明不支援,不同說明支援。類似思路的還有這種方式。

function issupportfontfamily(font) 

var width;

var body = document.body;

var container = document.createelement('span');

container.innerhtml = array(10).join('wi');

container.style.csstext = [

'position:absolute',

'width:auto',

'font-size:128px',

'left:-99999px'

].join(' !important;');

var getwidth = function (fontfamily) ;

var monowidth = getwidth('monospace');

var serifwidth = getwidth('serif');

var sanswidth = getwidth('sans-serif');

return monowidth !== getwidth(font + ',monospace') || sanswidth !== getwidth(font + ',sans-serif') || serifwidth !== getwidth(font + ',serif');

}

back to top

相容性(空格相容性)

在chrome與firefox下顯示的寬度不同,原因是兩個瀏覽器的預設字型不同,給html規定字型即可解決。下面有各種形式的空格,各有不同 不換行空格,按下空格鍵所產生的空格,受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...

相容性小結

1.不同瀏覽器的標籤預設的外補丁和內補丁不同。解決 2.chorme瀏覽器下字型最小12px 解決 font size 12px webkit transform origin x 0 webkit transform scale 0.5833333333333334 scale 12 3.ie瀏覽...

程式相容性

版本可以提供各種不同形式的相容性 源 相容性,鏈結相容性,執行相容性,和程序相容性。這些都是根據c 程式建立各個過程命名的,1 如果沒有使用者需要重新編譯任何 那麼程式庫的版本n和版本m就具有源 相容性 2 如果沒有使用者需要重新編譯任何目標檔案,那麼版本n和版本m就具有鏈結相容性 3 如果沒有任何...