移动端项目总结

背景
之前接触过移动端项目的网页，过程中遇到不少问题，也犯了些错误，现在有时间来总结下。对于移动端我们更要关注什么呢，是设备的各种分辨率，还是device-width呢?移动端设备为什么会有2个视口(visual viewport&layout viewport)？何谓是Retina屏，标准是什么？图片在Retina屏上为什么会模糊以及怎么处理？如何更好的为Retina屏幕设计呢？我们在移动端上用手指放大缩小的究竟是什么呢？为什么要使用<meta name=”viewport”>,以及使用此改变的究竟是什么呢？怎么更好的使用媒体查询(Medai query)?怎么检测移动端设备的性能,以及如何优化呢？
回归基础
先来看看有哪些基本概念需要提前知晓的：

像素px(pixel)

相对单位，又称画素，为图像显示的基本单位,。

pt(points)

物理单位，主要用于印刷与字体排版，长度为1/72 inch(1 inch = 2.54 cm)。

英寸(inch)

绝对单位,1英寸等于2.54厘米。

PPI(Pixels per inch)

计算过程为：
(1). 计算对角线像素



(2).计算PPI



注释：

表示屏幕对角线分辨率(单位：pixel)
屏幕分辨率的宽度(单位：pixel)
屏幕分辨率的高度(单位：pixel)
屏幕对角线长度(单位：inch)


Aspect ratio

屏幕宽高比，例如Iphone4的屏幕宽高比为4：3.

Retina

Retina显示屏（英文：Retina Display）具备足够高像素密度而使到人体肉眼无法分辨其中单独像素点的液晶屏，最初采用该种屏幕的产品iPhone 4由执行长史蒂夫·乔布斯于WWDC2010发布，其屏幕分辨率为960×640（每英寸像素数326ppi）。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
所以请注意：Retina的标准为：人眼看不到看不见单个物理像素点。
因为不同设备在使用状态下与人眼的距离不同，所以不同设备满足Retina标准的PPI也会不同。距离越小，PPI要求越高。
在iPad(3rd-Gen)发布会上，苹果给出了Retina设计标准的公式:

其中a代表人眼视角， h代表像素间距(pixel pitch)，其实就是一个像素的大小， d代表肉眼与屏幕的距离。
其中a代表人眼视角，h代表像素间距(pixel pitch)，其实就是一个像素的大小，d代表肉眼与屏幕的距离。符合以上条件的屏幕可以使肉眼看不见单个物理像素点。
而人眼视角小于或等于1角分(π/10800 弧度)的情况下，无法看见单个像素点。于是可得出Retina标准的PPT计算公式为：
所以假如人眼与屏幕的尺寸为11英寸，那么通过公式可得PPI = 312，而实际上 iPhone 4/4S 的 PPI 是 330,符合retina的要求。

CSS pixel ratio或CSS pixel density

像素密度,一般为1，1.5，2。例如iPhone 4+的CSS pixel ratio为2，Samsung Galaxy S I and II的CSS pixel ratio为1.5.
温故-回顾桌面端
首先我们要了解2个概念：device pixels和css pixels。

device pixels 代表的是设备的分辨率，可以通过screen.width/height来获取。
css pixels则是我们在css中定义的数值。

假如现在设备宽度都是2px，而一个元素的宽度也是2px，在100%缩放状态下会像下图这样,1个css pixels等于1个device-pixels大小：

而当zoom out时候会这样:

zoom in时：

也就是说其实缩放时候，我们既没有改变device pixels也没有改变元素的css pixels大小,元素放大和缩小后宽高仍然是2px，实际改变的是css pixels的物理尺寸。

Screen size

表示显示器的尺寸，用device pixels来标识，因为它不会改变。






Viewport

在桌面端只有1个视口(viewport)，那就是浏览器的窗口，但是在移动端，情况会有些复杂。
viewport=browser window=html(当html没有自定义宽度)= document.documentElement.clientWidth/clientHeight.
知新-洞悉移动端
前面也说了，移动端和桌面端不一样，它有2个视口(viewport)：可见视口(visual viewport)和 布局视口(layout viewport).
关于2者的区别，stack overflow有这样的解释：
想象下现在有一张不会改变尺寸和形状的大的图片，你手里拿着一个中空的框子(想象下砸空你手机的屏幕)，透过它你可以看到这张图片，并且这个框框的周围是用不透明的材料做成的，你只能通过中间的洞去看这张图片。你可以移动这个框子，靠近自己的眼睛的话可以看到更多的图片区域，也可以使它远离自己的眼睛，从而只看到这张图片的一部分小区域。
那张不可改变形状和尺寸的图片=布局视口(layout viewport)
你手中的中空的框子=可见视口(visual viewport)
也就是说我们在移动端用手指来缩放屏幕，其实改变的是可见视口(visual viewport)的尺寸，而布局视口(layout viewport)总是保持不变。
布局视口(layout viewport)=document.documentElement.clientWidth/Height



可见视口(visual viewport)=window.innerWidth/Height


媒体查询

媒体查询(Media queriesd)是和桌面端一样的，width/height以布局视口来参考，并且用CSS pixels来度量，device-width/height以设备屏幕来参考，用device pixels来度量。
也就说是width/height反映的是document. documentElement. clientWidth/Height，而device-width/height反映的是 screen.width/height。

Meta viewport

好吧，现在再让我们来看看<meta name=”viewport” content=”width=320″>，这里的width其实指的就是layout viewport,那通常用的就是将layout viewport的宽度设置为device-width。
这其中又涉及到移动端屏幕分辨率和devive-width的区别，比如iphone 3G的分辨率为320 x 480 而iPhone4/4s的分辨率为640×960,但是它们的device-width是一样的，如下图：



Device
resolution (px)
device-width/ device-height (px)


iPhone
320 x 480
320 x 480, in both portrait and landscape mode


iPhone 4
640 x 960
320 x 480, in both portrait and landscape mode
CSS
pixel density is 2


iPad 1 and 2
768 x 1024
768 x 1024, in both portrait and landscape mode


iPad 3
1536 x 2048
768 x 1024, in both portrait and landscape mode
CSS
pixel density is 2


Samsung Galaxy S I and II
480 x 800
320 x 533, in portrait mode
CSS pixel density is 1.5


Samsung Galaxy S III
720 x 1280
360? x 640?, in portrait mode


HTC Evo 3D
540 x 960
360 x 640, portrait mode
CSS pixel density is 1.5


Amazon Kindle Fire
1024 x 600
1024 x 600, landscape mode




Retina屏幕图片拉伸模糊

看我上面的一些概念，这点现在也很好理解，原因是：retina屏幕的2个像素才等于普通屏幕的1个像素，如下图：


性能优化

要注意的是CSS3一些效果比如投影，动画等对性能影响很大，对于动画可以用CSS开启硬件加速来提高网站性能

电池的耗费

与桌面端不同的是，在移动端我们要考虑网页对电池的耗费，还没有什么这方面的经验，如果你有，欢迎分享。
观点
相信我们或多或少听到这样的观点：
1.移动优先(Mobile first)，
2.使用媒体查询将一个复杂的网站从PC端移植到移动端
而我们都忘了“场景”和“功能差异性”，例如现在新浪微博没有移动端，你想直接用媒体查询将桌面端的代码移植到手机端，显然这是不可行的，手机端的功能因为屏幕尺寸的影响，必须将桌面端的功能精简优化才行，单纯的移植是非常不明智的。
参考资料
▪ A tale of two viewports
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html
▪ A pixel is not a pixel is not a pixel
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
▪ Pixel Pitch and Enlarged Mode
http://www.eizo.com/global/library/basics/pixel_pitch/
▪ width versus device-width
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
▪ Towards A Retina Web
https://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
▪ 知乎-关于Retina
http://www.zhihu.com/question/20088580
▪ List of displays by pixel density
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density