（0）调试环境
我是mac电脑，在系统偏好设置里点“共享”－－“互联网共享”－－“wifi共享”，这样手机就能接受来自mac的wifi。搭一个本地服务器，我用XAMPP。然后去寻找mac电脑自己的ip，用iphone访问就可以该ip就可以，切记不要去访问“localhost”，而是要访问实际的ip地址。。。
localhost代表自己这部手机，手机和电脑在一个网络里，所以手机要访问电脑就需要用手机访问电脑得ip地址，手机自己当然没有服务器，访问不了localhost。
（1）设置<meta charset="utf-8">让其支持中文，meta是自闭合标签。
（2）-webkit-box自适应
<p id="f">
<span>1</span>
<span>2</span>
</p>
首先p#f要设置display: -webkit-box，然后：
span:nth-child(2){
background-color: pink;
-webkit-box-flex:1;
display: inline-block;
}
要让box-flex产生效用，必须display为block（inline-block都无效）。
（3）
webkitTransform也像color，backgroundColor这些一样，可以通过style来设置，当然也可以通过class的方式实现。
$("#f")[0].style.webkitTransform="rotate(1314deg)";
$("#f").css({
"webkitTransform":"rotate(1314deg)"
})
幸福小摩天轮：
var i=0;
setInterval(function(){
if(i==361) return false; //361才停止，说明前一次已转到360deg
$("#f").css({
"webkitTransform":"rotate("+i+"deg)"
});
i++;
},10);
（4）
$("#f").css({
"webkitTransform":"rotate(360deg) translate(250px) scale(2)"
});
translate一定是需要带px单位的，回忆border:"1px solid red"就明白，为什么webkitTransform要写成这样的格式。写成：
$("#f").css({
"webkitTransform":"rotate(360deg)"，
"webkitTransform":"translate(250px)"，
"webkitTransform":"scale(2)"
});
这样只会有scale（2）的效果，因为后面会覆盖前面的，符合属性的写法参照border的写法。
（5）
viewport（并非屏幕大小）
iphone的物理尺寸像素是320px，但为了满足更好的视觉需要，会给一个默认980px宽的viewport值。我们回忆下我们操作iphone，网站一般是可以放大的，当我们放大最大的时候，网页宽就是默认的980px（前提是没特别设置过viewport）。
viewport好比一个假想出来的视窗，它的默认值是980px，所以当我们设置14px大小字体的文字的时候看起来好小，而如果我们把viewport变为设备实际宽，则14px是相对于320px，则会清晰很多。
iphone不设置viewport的情况下：
alert(window.innerWidth); //980
如果设置了width:device-width，则
alert(window.innerWidth); //320
例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
自闭合标签的/最好不要忘记，否则iphone下容易出问题。
让viewport宽度等于设备实际宽，不要再默认为980px（刚好3倍还多出20px），同时不允许缩放。这样页面的分辨率就跟实际设备的相同。
验证办法就是<div>1</div>，把其宽度设置为160px而且背景色为蓝，然后刷页面，我们会发现刚好占屏幕一半。
我个人想到一个最恰当的比喻就是，viewport相当于我们小时候玩过的万花筒，你通过320px尺寸的屏幕可以看到980px的世界。
阿当：
viewport并非只是ios上的独有属性，在android、winphone上同样也有viewport。它们要解决的问题是相同的，即无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如，你拿个3.5寸-320
* 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，虽然设备的分辨率不同,物理尺寸也不同，但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说，你的网站是800px宽，你可以通过设置viewport的width=800，来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。
（6）
一个touchstart，touchmove，touchend的小实例。
var canvas=document.getElementById("canvas"),startX,startY,spirit,gg;
function A(event){
event.preventDefault();
if(spirit||!event.touches.length)return;
var touch=event.touches[0];
startX=touch.pageX;
startY=touch.pageY;
spirit=document.createElement("div");
gg=document.createTextNode(321312);
spirit.appendChild(gg);
spirit.className="spirit";
spirit.style.left=startX;
spirit.style.top=startY;
canvas.appendChild(spirit);
};
function B(event){
event.preventDefault();
var touch=event.touches[0];
x=touch.pageX-startX;
y=touch.pageY-startY;
spirit.style.webkitTransform="translate("+x+"px, "+y+"px)";
};
function C(event){
canvas.removeChild(spirit);
spirit=null;
}
document.addEventListener("touchstart",A,false);
document.addEventListener("touchmove",B,false);
document.addEventListener("touchend",C,false);
参考：http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html
（7）分辨率和像素
分辨率就是一定尺寸下，横向能显示多少个像素，纵向能显示多少个像素，如分辨率320*160则说明横有320个像素，纵向有160个像素，所以其实分辨率没有所谓的单位，只是横向像素个数和纵向像素个数之乘积。
我们刚才讲，其实设备的尺寸是一定的，那么如果有设备有10英寸宽，而横向有100个像素，我们就容易算出ppi，PPI = Pixels per inch，每英寸所拥有的像素（Pixel）数目，这里的值为一英寸一个。
一定尺寸下，像素越多，则显示出来的图像越精致，这说明它需要更多的像素来呈现一幅图画，细致到图画的每一个细节。但单个像素所代表的物理尺寸就会缩小，因为数量多了，尺寸一定，只能单个像素的尺寸缩小。这有点通货紧缩的意思，因为分辨率小的时候，单个像素物理尺寸是比较大的，但是分辨率提上去后，单个像素的物理尺寸急剧缩小。
把像素理解成田地里的一个玉米苗，而分辨率则是在一个固定大小的田地里由许多颗同样的玉米苗构成的一个玉米田，在这个玉米田里，分辨率越高，则表示在这个玉米田里的玉米苗就会更密，而分辨率越低，就表示在这个玉米田里的玉米苗就越疏。
（8）