2012年5月16日 星期三

Javascript 偵測 手機 / 行動裝置,並加到 html 的 class 中

我最近很常用到這個功能。
原本是用一個叫做 headjs 的,有被 hosting 在cdnjs 裡面(但如前所述,我不太敢直接用)。

它可以把各個 browser 加在 html class裡,然後寫 css 就可以這樣寫。

.lt-ie9 .box { padding: 10px; }
或是 css3 相關的功能也可以這樣子寫
.no-boxshadow .box {
   border: 2px solid #ddd;
}




但對本人而言,css3 我就直接寫進去了,不支援就算了。
然而 ie6 - ie8 又有好用的 css hack。
headjs 雖然不大,但還是會拖慢一些速度。
另外,headjs 偵測的瀏覽器不包含 mobile 裝置。

這一段 js 是在偵測 手機裝置而已,我會常用到的原因是因為,js 在 mobile 或 tablet 的寫法差異很大,甚至連功能都不一樣。
--
--
平板電腦中會 加上 tablet
手機裝置會加上 mobile
ios 系列會加上 ios
其它裝置,就先不理它們吧!
請自行到 http://refresh-sf.com/yui/ 去壓縮吧!