AlenWu的程式學習筆記

前陣子需要開發一個顯示在手機App的網頁功能，因iphone及android手機上用同一個css顯示有點落差，故以User Agent Sniffing判斷後再載入不同的css檔，做法如下：

1. 取得User Agent內容文字，轉成小寫方便比對。

   var deviceAgent = navigator.userAgent.toLowerCase();

2. 以正則表示法判斷關鍵字"iphone"來確認是否為iphone。

   if (deviceAgent.match(/iphone/i)) { }

3. 確認為iphone後，在頁面載入時，於header額外載入覆蓋用的css檔。

       if (document.createStyleSheet) {
           // createStyleSheet -> IE專用的method
           document.createStyleSheet('../Styles/mobile_iphone.css);
       } else {
           var newSS = document.createElement('link');
           newSS.rel = 'stylesheet';
           newSS.href = '../Styles/mobile_iphone.css'
           document.getElementsByTagName("head")[0].appendChild(newSS);
       }

這樣就完成了，缺點是要維護兩個css檔，但是這樣可以確保畫面不會差太多，而且在Chrome的模擬畫面也是有效的。

如果要判斷其他的裝置可以用其他的關鍵字，可以參考這個連結自行找出要關鍵字判斷。