偵測(cè)iPhone/iPod

開(kāi)發(fā)特定設(shè)備的移動(dòng)網(wǎng)站，首先要做的就是設(shè)備偵測(cè)了。下面是使用Javascript偵測(cè)iPhone/iPod的UA，然后轉(zhuǎn)向到專(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)行的，但是用戶(hù)還是可以禁用。它也會(huì)造成客戶(hù)端刷新和額外的數(shù)據(jù)傳輸，所以下面是服務(wù)器端偵測(cè)和轉(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就會(huì)顯示成縮略形式。如果你專(zhuān)門(mén)為iPhone/iPod開(kāi)發(fā)網(wǎng)站，這一條很有用，而且很簡(jiǎn)單，只需要插入到head里就可以：

Code:

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

使用iPhone規(guī)格圖標(biāo)

如果你的用戶(hù)將你的網(wǎng)站添加到home screen，iPhone會(huì)使用網(wǎng)站的縮略圖作為圖標(biāo)。然而你可以提供一個(gè)自己設(shè)計(jì)的圖標(biāo)，這樣當(dāng)然更好。圖片是57×57大小，png格式。不需要自己做圓角和反光，系統(tǒng)會(huì)自動(dòng)完成這些工作。然后將下面這條加入head中：

Code:

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

阻止旋轉(zhuǎn)屏幕時(shí)自動(dòng)調(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;}

偵測(cè)設(shè)備旋轉(zhuǎn)方向

iPhone可以在橫屏狀態(tài)下瀏覽網(wǎng)頁(yè)，有時(shí)候你會(huì)想知道用戶(hù)設(shè)備的手持狀態(tài)來(lái)增強(qiáng)可用性和功能。下面一段Javascript可以判斷出設(shè)備向哪個(gè)方向旋轉(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才識(shí)別的CSS

如果不想設(shè)備偵測(cè)，可以用CSS媒體查詢(xún)來(lái)專(zhuān)為iPhone/iPod定義樣式。

Code:

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

CSS3媒體查詢(xún)

對(duì)于CSS3的媒體（media）查詢(xún)，iPhone和iPad是不同的。通過(guò)這個(gè)技術(shù)，可以對(duì)設(shè)備不同的握持方向應(yīng)用不同的樣式，增強(qiáng)功能和體驗(yàn)。

iPhone是通過(guò)屏幕最大寬度來(lái)偵測(cè)的。是這樣：

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)不同，它直接使用了媒體查詢(xú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” />
之后只要將不同的樣式分別定義出來(lái)就可以了。

縮小圖片

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

Code:

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

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

}

注意如果原圖片非常大，或一個(gè)頁(yè)面非常多圖，最好還是在服務(wù)器端縮放到480像素寬，iPhone只需要在正常瀏覽時(shí)縮略到320像素。這樣不會(huì)消耗太多流量和機(jī)能。

默認(rèn)隱藏工具欄

iPhone的瀏覽器工具欄會(huì)在頁(yè)面最頂端，卷動(dòng)網(wǎng)頁(yè)后才隱藏。這樣在加載網(wǎng)頁(yè)完成后顯得很浪費(fèi)空間，特別是橫向屏幕時(shí)。我們可以讓它自動(dòng)卷動(dòng)上去。

Code:

<scripttype=”application/x-javascript”>
addEventListener(“l(fā)oad”, function()
{
setTimeout(hideAddressbar, 0);
}, false);

function hideAddressbar()
{
window.scrollTo(0, 1);
}
</script>

模擬:hover偽類(lèi)

因?yàn)閕Phone并沒(méi)有鼠標(biāo)指針，所以沒(méi)有hover事件。那么CSS :hover偽類(lèi)就沒(méi)用了。但是iPhone有Touch事件，onTouchStart 類(lèi)似 onMouseOver，onTouchEnd 類(lèi)似 onMouseOut。所以我們可以用它來(lái)模擬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è)計(jì)一個(gè)鏈接，感覺(jué)可以更像按鈕。并且，這個(gè)模擬可以用在任何元素上。

iphone fixed positioning

Code:

關(guān)于漂浮定位，測(cè)試后發(fā)現(xiàn) { position: fixed; } 不能為其用，
可以改為 { position:absolute; } 來(lái)實(shí)現(xiàn)，可以使用iphone看下DEMO：iphone-fixed-positioning

Touch Events
iPhone 是使用觸屏的方式，所以就需要有手觸屏和離開(kāi)的時(shí)候的事件機(jī)制，幸好，iPhone做好了這方面的工作，提供了四個(gè)處理touch的事件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch) 。

Gestures
即是指兩只手指接觸屏幕的時(shí)候縮放或者旋轉(zhuǎn)的效果，對(duì)于偵聽(tīng)gestures，iPhone也有三個(gè)事件：gesturestart，gestureend，gesturechange。
同時(shí)事件參數(shù)event有兩個(gè)屬性：scale，rotate。Scale的中間值是1，大于1表示放大，小于1表示縮小。