iPhone開發(fā)優(yōu)秀網(wǎng)站 必用代碼要介紹的內(nèi)容，如果要針對iPhone/iPod Touch開發(fā)移動網(wǎng)站，以下十條小代碼幾乎肯定是需要用到的，方便又有效。

偵測iPhone/iPod

開發(fā)特定設(shè)備的移動網(wǎng)站，首先要做的就是設(shè)備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，然后轉(zhuǎn)向到專屬的URL。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {  
if (document.cookie.indexOf("iphone_redirect=false") == -1) {  
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";  
}  
} 

雖然Javascript是可以在水果設(shè)備上運行的，但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數(shù)據(jù)傳輸，所以下面是服務(wù)器端偵測和轉(zhuǎn)向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {  
header('Location: http://yoursite.com/iphone');  
exit();  
} 

設(shè)置viewpoint和屏幕等寬

如果不設(shè)置viewpoint，網(wǎng)站在viewpoint就會顯示成縮略形式。如果你專門為iPhone/iPod開發(fā)網(wǎng)站，這一條很有用，而且很簡單，只需要插入到head里就可以：

<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中：

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

阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小

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

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：

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.getElementByIdx_x(“page_wrapper”).setAttribute(“class”, contentType);  
} 

iPhone才識別的CSS

如果不想設(shè)備偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。

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

縮小圖片

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

@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)頁完成后顯得很浪費空間，特別是橫向屏幕時。我們可以讓它自動卷動上去。

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

使用特殊鏈接

這兩條不用說了吧：

<a href="tel:12345678900">打電話給我</a> 
<a href="sms:12345678900">發(fā)短信</a> 

模擬:hover偽類

因為iPhone并沒有鼠標(biāo)指針，所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript：

var myLinks = document.getElementsByTagName_r('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效果：

a:hover, a.hover { } 

這樣設(shè)計一個鏈接，感覺可以更像按鈕。并且，這個模擬可以用在任何元素上。

小結(jié)：iPhone開發(fā)優(yōu)秀網(wǎng)站 必用代碼的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)對你能有所幫助！