偵測(cè)iPhone/iPod
開(kāi)發(fā)特定設(shè)備的移動(dòng)網(wǎng)站
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)行的，但是用戶還是可以禁用
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ì)顯示成縮略形式
Code:
<meta name=”viewport”content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
使用iPhone規(guī)格圖標(biāo)
如果你的用戶將你的網(wǎng)站添加到home screen
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è)
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è)
Code:
@media screen and (max-device-width: 480px){}
CSS3媒體查詢
對(duì)于CSS3的媒體（media）查詢
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)不同
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像素寬默認(rèn)隱藏工具欄
iPhone的瀏覽器工具欄會(huì)在頁(yè)面最頂端
Code:
<scripttype=”application/x-javascript”>
addEventListener(“l(fā)oad”, function()
{
setTimeout(hideAddressbar, 0);
}, false);
function hideAddressbar()
{
window.scrollTo(0, 1);
}
</script>
模擬:hover偽類
因?yàn)閕Phone并沒(méi)有鼠標(biāo)指針，所以沒(méi)有hover事件
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è)鏈接
iphone fixed positioning
Code:
關(guān)于漂浮定位
Touch Events
iPhone 是使用觸屏的方式
Gestures
即是指兩只手指接觸屏幕的時(shí)候縮放或者旋轉(zhuǎn)的效果
