2011年12月9日 星期五

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

0 意見:

Related Posts Plugin for WordPress, Blogger...