关于移动端开发的一些小事

最近看到一些关于移动端开发的小细节问题，资料来源比较杂，就自己随便做个总结

像素在移动端的概念纠正

---

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

dpr：设备像素缩放比（devicePixelratio），设备像素缩放比。
CSS像素：CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。
设备独立像素(device-independent pixe)：(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用并控制的虚拟像素

在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的

PPI 全称是（pixel per inch）翻译下就是每英寸内有多少个像素点，这个像素点指的是设备像素点（物理像素）

|| ldpi |mdpi | ldpi|xhdpi|
| ------------- |:-------------:| -----:|
|ppi| 120 | 160 | 240 |320|
|默认缩放比| 0.75 | 1 | 1.5 |2.0|

以iphone5为例子，设备分辨率是1136640，根据公式算出ppi是326.
对照表格，326ppi属于dpr=2，所以i5转换为传统意义的px就是320568px，所以就会看到下面这个图

viewport登场

---

移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。
根据ppk大神对于viewport的研究，他认为viewport分为两层

layout viewport:某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth
来获取。

visual viewport:layout viewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做visual viewport。visual viewport的宽度可以通过window.innerWidth
来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

但上面两层完全不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容

ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。

ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport.i5的ideal viewport就是320px.

meta标签登场

---

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

其中,content="width=device-width,就是把当前的viewport宽度设置为 ideal viewport 的宽度
initial-scale是设置设置页面的初始缩放值.
user-scalable是是否允许用户进行缩放
关于这个initial-scale,缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，也就得到了 ideal viewport.但一般情况下都是两句话加上去,是因为iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准.当遇到这种情况时，浏览器会取它们两个中较大的那个值,所以两个都写上去,妥妥的

click优化-300ms的延迟

---

在移动设备上没有了鼠标输入,hover等一些鼠标事件不再生效,取而代之是touch事件去优化触碰.
这东西最早开始在safari上,所有的点击都来个300ms的延迟.

这东西可以通过new Date()去记录事件然后前后相减做到延时