偵測iPhone/iPod
開發(fā)特定設(shè)備的移動網(wǎng)站，首先要做的就是設(shè)備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，然后轉(zhuǎn)向到專屬的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是可以在水果設(shè)備上運(yùn)行的，但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數(shù)據(jù)傳輸，所以下面是服務(wù)器端偵測和轉(zhuǎn)向：
Code:
if(strstr($_SERVER['HTTP_USER_AGENT'],’iPhone’)|| strstr($_SERVER['HTTP_USER_AGENT'],’iPod’)) {
header(‘Location: http://www.8mart.cn/iphone’);
exit();
}
設(shè)置viewpoint和屏幕等寬
如果不設(shè)置viewpoint，網(wǎng)站在viewpoint就會顯示成縮略形式。如果你專門為iPhone/iPod開發(fā)網(wǎng)站，這一條很有用，而且很簡單，只需要插入到head里就可以：
Code:
<meta name=”viewport”content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
使用iPhone規(guī)格圖標(biāo)
如果你的用戶將你的網(wǎng)站添加到home screen，iPhone會使用網(wǎng)站的縮略圖作為圖標(biāo)。然而你可以提供一個自己設(shè)計的圖標(biāo)，這樣當(dāng)然更好。圖片是57×57大小，png格式。不需要自己做圓角和反光，系統(tǒng)會自動完成這些工作。然后將下面這條加入head中：
Code:
<rel=”apple-touch-icon”href=”images/youricon.png”/>
阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小
-webkit-text-size-adjust是webkit的私有css：
Code:
html, body, form, fieldset, p, div, h1, h2,h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
偵測設(shè)備旋轉(zhuǎn)方向
iPhone可以在橫屏狀態(tài)下瀏覽網(wǎng)頁，有時候你會想知道用戶設(shè)備的手持狀態(tài)來增強(qiáng)可用性和功能。下面一段Javascript可以判斷出設(shè)備向哪個方向旋轉(zhuǎn)，并且替換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 += “l(fā)eft”;
break;
case 180:
contentType += “flipped”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”,contentType);
}
iPhone才識別的CSS
如果不想設(shè)備偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。
Code:
@media screen and (max-device-width: 480px){}
CSS3媒體查詢
對于CSS3的媒體（media）查詢，iPhone和iPad是不同的。通過這個技術(shù)，可以對設(shè)備不同的握持方向應(yīng)用不同的樣式，增強(qiáng)功能和體驗。
iPhone是通過屏幕最大寬度來偵測的。是這樣：
Code:
<link rel=”stylesheet” media=”screen and(max-width: 320px)” href=”portrait.css” />
<link rel=”stylesheet” media=”screen and (min-width: 321px)”href=”landscape.css” />
而iPad有點(diǎn)不同，它直接使用了媒體查詢中的orientation屬性。是這樣：
Code:
<link rel=”stylesheet” media=”screen and(orientation:portrait)” href=”portrait.css” />
<link rel=”stylesheet” media=”screen and (orientation:landscape)”href=”landscape.css” />
之后只要將不同的樣式分別定義出來就可以了。
縮小圖片
網(wǎng)站的大圖通常寬度都超過480像素，如果用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機(jī)能還夠，我們可以用CSS讓iPhone自動將大圖片縮小顯示。
Code:
@media screen and (max-device-width:480px){
img{max-width:100%;height:auto;}
}
注意如果原圖片非常大，或一個頁面非常多圖，最好還是在服務(wù)器端縮放到480像素寬，iPhone只需要在正常瀏覽時縮略到320像素。這樣不會消耗太多流量和機(jī)能。
默認(rèn)隱藏工具欄
iPhone的瀏覽器工具欄會在頁面最頂端，卷動網(wǎng)頁后才隱藏。這樣在加載網(wǎng)頁完成后顯得很浪費(fèi)空間，特別是橫向屏幕時。我們可以讓它自動卷動上去。
Code:
<scripttype=”application/x-javascript”>
addEventListener(“l(fā)oad”, function()
{
setTimeout(hideAddressbar, 0);
}, false);
function hideAddressbar()
{
window.scrollTo(0, 1);
}
</script>
模擬:hover偽類
因為iPhone并沒有鼠標(biāo)指針，所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript：
Code:
var myLinks =document.getElementsByTagName(‘a(chǎn)’);
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效果 */ }
這樣設(shè)計一個鏈接，感覺可以更像按鈕。并且，這個模擬可以用在任何元素上。
iphone fixed positioning
Code:
關(guān)于漂浮定位，測試后發(fā)現(xiàn) { position: fixed; } 不能為其用，
可以改為 { position:absolute; } 來實現(xiàn)，可以使用iphone看下DEMO：iphone-fixed-positioning
Touch Events
iPhone 是使用觸屏的方式，所以就需要有手觸屏和離開的時候的事件機(jī)制，幸好，iPhone做好了這方面的工作，提供了四個處理touch的事件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch) 。
Gestures
即是指兩只手指接觸屏幕的時候縮放或者旋轉(zhuǎn)的效果，對于偵聽gestures，iPhone也有三個事件：gesturestart，gestureend，gesturechange。
同時事件參數(shù)event有兩個屬性：scale，rotate。Scale的中間值是1，大于1表示放大，小于1表示縮小。
