iphone/ipad前端開發技巧

iPad開發的局限性

    1、在iPad上使用Safari瀏覽普通網站網頁的時候，網頁因為太大而導致需要手動放大縮小或者滑動，雖然這種滑動行為在iPad上市之初的各種宣傳中被津津樂道，但時間久了我們還是會發現這樣做並不方便，給使用者帶來的感受並不十分好。
    2、不支援Flash,在沒有越獄的iPad Safari中，網站的Flash都是無法顯示的，但可以通過第三方軟體或外掛程式或者瀏覽器來解決，不過，即使不能顯示Flash，你一樣能夠用HTML5和CSS3實現同樣的效果。
    3、沒有滑鼠游標,這意味著滑鼠屬性，例如滑鼠移至上方屬性是不可能有的。
    4、你或許可以為這個找到一些變通的辦法，但是到你的使用者那裡這些該如何工作將會是困難的事。
    捲軸不能按照預期那樣起作用,捲軸不能顯示包含了充滿過多分區的內容。架構也存在高度和寬度的問題。另外，滾動過程中需要兩個手指的手勢。（我們將在下文中進行充分的討論）
    5、不支援CSS固定式配置,HTML 元素 position:fixed CSS屬性不能正確顯示，常常會使得頁面停留在第一屏，無法向下翻頁、放大縮小。

開發特定裝置的移動網站，首先要做的就是裝置偵測了。下面是使用Javascript偵測iPhone/iPod的UA，然後轉向到專屬的URL。

Code:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

if (document.cookie.indexOf("iphone_redirect=false") == -1) {

window.location = "http://www.8mart.cn";

}

}

雖然Javascript是可以在水果裝置上啟動並執行，但是使用者還是可以禁用。它也會造成用戶端重新整理和額外的資料轉送，所以下面是伺服器端偵測和轉向：

Code:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {

header('Location: http://www.8mart.cn/iphone');

exit();

}

設定viewpoint和螢幕等寬

如果不設定viewpoint，網站在viewpoint就會顯示成縮減形式。如果你專門為iPhone/iPod開發網站，這一條很有用，而且很簡單，只需要插入到head裡就可以：

Code:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

使用iPhone規格表徵圖

如果你的使用者將你的網站添加到home screen，iPhone會使用網站的縮圖作為表徵圖。然而你可以提供一個自己設計的表徵圖，這樣當然更好。圖片是57×57大小，png格式。不需要自己做圓角和反光，系統會自動完成這些工作。然後將下面這條加入head中：

Code:

 <rel="apple-touch-icon" href="images/youricon.png"/>

阻止旋轉螢幕時自動調整字型大小

-webkit-text-size-adjust是webkit的私人css：

Code:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

偵測裝置旋轉方向

iPhone可以在橫屏狀態下瀏覽網頁，有時候你會想知道使用者裝置的手持狀態來增強可用性和功能。下面一段Javascript可以判斷出裝置向哪個方向旋轉，並且替換css：

Code:

window.onload = function initialLoad() {updateOrientation();}   

function updateOrientation(){

var contentType = “show_”;

switch(window.orientation){

case 0:

contentType += “normal”;

break;  

case -90:

contentType += “right”;

break;

case 90:

contentType += “left”;

break;

case 180:

contentType += “flipped”;

break;

}

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);

}

iPhone才識別的CSS

如果不想裝置偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。

Code:

@media screen and (max-device-width: 480px) {}

CSS3媒體查詢

對於CSS3的媒體（media）查詢，iPhone和iPad是不同的。通過這個技術，可以對裝置不同的握持方嚮應用不同的樣式，增強功能和體驗。

iPhone是通過螢幕最大寬度來偵測的。是這樣：

Code:

 

而iPad有點不同，它直接使用了媒體查詢中的orientation屬性。是這樣：

Code:

 

之後只要將不同的樣式分別定義出來就可以了。

縮小圖片

網站的大圖通常寬度都超過480像素，如果用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過螢幕。好在iPhone機能還夠，我們可以用CSS讓iPhone自動將大圖片縮小顯示。

Code:

@media screen and (max-device-width: 480px){

img{max-width:100%;height:auto;}

}

注意如果原圖片非常大，或一個頁面非常多圖，最好還是在伺服器端縮放到480像素寬，iPhone只需要在正常瀏覽時縮減到320像素。這樣不會消耗太多流量和機能。

預設隱藏工具列

iPhone的瀏覽器工具列會在頁面最頂端，捲動網頁後才隱藏。這樣在載入網頁完成後顯得很浪費空間，特別是橫向螢幕時。我們可以讓它自動捲動上去。

Code:

 window.addEventListener('load',function(){
setTimeout(scrollTo,0,0,1);
},false);

類比:hover偽類

因為iPhone並沒有滑鼠指標，所以沒有hover事件。那麼CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來類比hover。使用Javascript：

Code:

var myLinks = document.getElementsByTagName('a');

for(var i = 0; i < myLinks.length; i++){

myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);

myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);

}

然後用CSS增加hover效果：

Code:

a:hover, a.hover { /* 你的hover效果 */ }

這樣設計一個連結，感覺可以更像按鈕。並且，這個類比可以用在任何元素上。

iphone fixed positioning

Code:
 
關於漂浮定位，測試後發現{ position: fixed; } 不能為其用，
 可以改為{ position:absolute; } 來實現，可以使用iphone看下DEMO： 
 iphone-fixed-positioning  http://uecss.com/demo/jeff/iphone-fixed-positioning/
 
Touch Events
 iPhone 是使用觸屏的方式，所以就需要有手觸屏和離開的時候的事件機制，幸好，iPhone做好了這方面的工作，提供了四個處理touch的事 件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch) 。
 
Gestures
 即是指兩隻手指接觸螢幕的時候縮放或者旋轉的效果，對於偵聽gestures，iPhone也有三個事件：gesturestart，gestureend，gesturechange。
 同時事件參數event有兩個屬性：scale，rotate。Scale的中間值是1，大於1表示放大，小於1表示縮小。
 
 
 
參考資料：
 
iPhone CSS—tips for building iPhone websiteshttp://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
 
iPhone & iPod Detection Using Javascripthttp://davidwalsh.name/detect-iphone
 
iPhone Development: 12 Tips To Get You Startedhttp://articles.sitepoint.com/article/iphone-development-12-tips/
 
Tutorial: Building a website for the iPhonehttp://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
 
hover pseudoclass for the iPhonehttp://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
 
fixed-positioning-on-mobile-safarihttp://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
 
Preparing Your Web Content for iPadhttp://developer.apple.com/safari/library/technotes/tn2010/tn2262/index.html
 
 
摘自 ξ..命運ing.