去慕课网看了一个系列视频，讲移动web开发的琐碎知识，记录一下
课程地址

像素 分辨率

问题：640*1136像素的区域，能否在iphone5(iphone5机器的分辨率为640*1136)上完全显示？
答案：不能。涉及到物理像素与逻辑像素的问题。
iphone5的640像素是物理像素，但是我们浏览器使用的px是逻辑像素。
几个单位定义：dp,pt 设备无关像素; dpr 设备像素缩放比。 1px = dpr^2 * dp; dpi 打印机每英寸可喷墨点，浏览器每英寸可显示的像素数; ppi屏幕每英寸像素数量，跟dpi其实一个意思，二者用的都是物理像素;
就iphone5来看， ppi = sqrt(1136^2+640^2)/4 = 326。表示每英寸有326个像素，长度英寸(这里是对角线长度)，不是面积平方英寸。
iphone5的xhdpi=320, dpr=2。retina屏幕的dpr是要大于等于2的。

viewport

问题：一个PC页面，会如何在手机上展示？
答案：默认情况下，iphone5会完整展示页面，而不是只显示屏幕大小的那部分。涉及到viewport的显示机制。
IOS的viewport宽度是980px，将页面放在这个viewport里，通过缩放完全展示出来。但android的viewport大小是不确定的。使用viewpot机制，是为了先让页面排版正确，然后再缩放。避免直接缩放在手机上产生排版错误。
visual viewport 人的视野viewport，上面那层，度量。layout viewport 底层的全部页面viewport，布局。
我们设计移动页面时，并不以设备的默认viewport大小进行开发，而是通过meta标签指定viewport大小。如下：

<meta name="viewport" content="name=value,name=value">

width=device-width 将viewport宽度设为设备宽度（逻辑宽度）。
initial-scale=1 缩放比设为1。 则布局viewport宽度和度量viewport宽度相同。
最常用的 width=device-width,initial-scale=1,user-scalable=no。
然后有2种设计思路：

1. 手机宽多少，就按多少来设计。
2. 1px=1dp,设scale=0.5，则物理像素等于逻辑像素(针对缩放比为0.5的)。

响应式布局

flex布局可以解决一些头疼的响应式布局问题。
大概方法是,外层设为display:flex (可能要加内核前缀) 内层的项目 flex:1 flex:2 则一个1/3 一个2/3。
混合划分，左边图片设为width:100px,右边文字flex:1。
不定宽高的水平垂直居中,经典版：

.xx{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
}

flexbox版

.parent{
    justify-content:center: //子元素水平居中
    align-items:center;//子元素垂直居中
    display:-webkit-flex;
}

IOS可以使用最新的flex布局。android4.4以下只兼容旧版的flexbox布局。只是css拼写方式不同。可以具体查阅相关手册。
课程给了一个DEMO，一目了然，感觉比网上将flex布局的其他文章要清晰许多。我放到自己博客里了，地址如下：
demo地址

css的media查询

现在设计手机页面，基本都得用到这个。根据实际屏幕大小来做不同的css样式。
百分比布局：仅适用媒体查询来使用不同的固定宽度设计，只会从一组css到另一组css。
弹性图片，max-width:100%;height:auto;外层容器随浏览器大小改变。
另外，达到手机屏幕宽度时候，删掉一些元素。经常切换的元素，使用绝对定位。
高清图片，为了避免图片产生模糊，高宽应该使用物理像素单位渲染。比如dpr=2 则width=pic_width/2。
一像素边框，1px其实是2个dp。所以要用0.5个dp。border-top:1px solid #ddd; -webkit-transform:sacleY(0.5);用1px缩放了0.5；放到一个before伪类里面，可以当做边框使用。

移动web的点击事件

移动web的普通点击事件，响应要慢300ms，因为要判断是单击还是双击。所以要用tab事件代替click事件。但是tap事件不是原生的，需要自己实现或者用库，入zepto。
弹性滚动，body自带。如果要局部弹性滚动，则 overflow:scroll; -wekit-overflow-scrolling:touch; android不支持。