判斷是否為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樣式了。

留言

張貼留言