侦测iphone/ipod
开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用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:
使用iphone规格图标
如果你的用户将你的网站添加到home screen，iphone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：
code:
阻止旋转屏幕时自动调整字体大小
-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:
addeventlistener(“load”, function()
{
settimeout(hideaddressbar, 0);
}, false);
function hideaddressbar()
{
window.scrollto(0, 1);
}
模拟: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
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表示缩小。
