判斷是否為ipad/ipod/iphone切換css

大多數開發網頁的人應該都有認知，就是手機跟一般電腦的瀏覽行為是不大一樣的，主要的原因是螢幕大小不一樣，但最近在寫網頁的時候又遇到一個問題，就是即使是ipad這種螢幕比較大的平板電腦，因為觸碰螢幕的關係，使用者使用起來還是會不大一樣，如果我們開發的網頁希望能在ipad也能有比較好的使用者經驗，又不想寫一個新的頁面，我們就可以判斷裝置是否為ipad/iphone去切換css。

首先一樣用外部連結的css樣式，預設的樣式是給一般電腦用的，另外給他一個id="css_style"
<link rel="stylesheet" href="normal.css" type="text/css" id="css_style"/>
然後準備另外一隻css: ipad.css

然後用javascript去偵測是否為ipad/iphone

view plaincopy to clipboardprint?

1. //偵測是否為ipad   
2. if(/iPad/i.test(navigator.userAgent) {   
3.     //alert裝置名稱   
4.     alert(navigator.userAgent);   
5.     //如果是則切換css   
6.     $("#css_style").attr("href","ipad.css");   
7. }   
8. //如果所有的裝置要一起改變可以這樣用   
9. if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {   
10.     $("#css_style").attr("href","ipad.css");   
11. };  

之後用不同裝置看，就會有不一樣的css樣式了。