移动篇 视口viewport

　　最近在看奇舞团新书<<移动WEB手册>>，心得如下：

　　在WEB的响应式设计出来之前，如果直接在手机设备上显示针对PC端的网站，因为屏幕的分辨率很小，往往出现的是横纵方向的滚动条，而且字体很小。为了更好的显示效果，就需要将网站针对小屏幕做出相应的适配。

　　布局视口：在移动端浏览器，网站所展现的界面宽度、样式；

　　视觉视口：在移动端浏览器，用户通过手机可以看到网站界面，可以是全部、也可以是部分（有横纵滚动条）。

　　最优的效果是将布局视口局限在视觉视口中，限制横向滚动条的出现，比如：在Retina出现之前，手机屏幕的分辨率在320px/480px，可以针对这种分辨率级别的设备来适配网站设计；但是后来Retina出现带来的问题就是设备屏幕的物理尺寸没有发生变化，但是分辨率变了，从320X480变为640X960，这就使得如果根据分辨率来调整网站的开发方式是失败的。

　　同时Retina出现的本身目的是说：将原来1个像素显示的屏幕替换为相应的4个，横纵方向变成原来2倍，以此达到高清的效果。因此640X960物理像素的屏幕，网站仍然应该以320X480CSS像素的效果来展示，这样CSS像素就成为了相对单位：

　　物理像素：硬件屏幕设备实际的横纵方向的点阵的基本单位，由硬件决定；

　　CSS像素：网站设计方面的基本单位，也称：逻辑像素，WEB开发人员无需关心硬件级别适配，只需按照CSS像素方式的设计布局即可。

　　由此新的名词产生：设备像素比DPR（Device Pixel Ratio），指的是：CSS像素与物理像素的比，也可以看做是：屏幕物理像素大小（640X960物理像素）与理想视口大小（320X480CSS像素）的比。DPR也可以是小数，如1.5。

 

　　分辨率有两个单位：

　　dpi：每英寸点数（Dots per inch），这里的点数指的是像素的个数，针对于屏幕，这个值相对固定，为72。以此来计算：分辨率 = 72 dpi * inch_size (按照物理像素数量算) 或者 72 / 144 / 216 dpi（按照物理像素密度算）；

　　dppx: 每像素点数（Dots per pixel），这个单位不被广泛支持，在DPR=2的屏幕上来计算：分辨率 = (72 dpi * DPR) * inch_size (按照物理像素数量算) 或者 1 / 2 / 3 dppx（按照物理像素密度算）；

　　按照物理像素密度算，分辨率与屏幕尺寸无关，这种说话常用在媒体查询或者PS中； 

　　按照物理像素数量算，分辨率是与尺寸有关，这种说法之前用在DPR=1的PC电脑屏幕上，如：1600X1200。

 

　　DPR与分辨率的关系：

　　分辨率reslution与DPR描述的实际上是一个东西，只是站在不同角度上看待的，由于前者在移动端支持的不太好，所以DPR成为事实上的标准，而被普遍支持。以后的移动端开发都应该以DPR作为参考来述说。

 

　　meta中的viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　device-width就是以物理像素计算的屏幕宽度，如：DPR为2，理想视口为320X480的屏幕，宽度为640；

　　width=device-width: 将宽度设定为物理像素的宽度，然后通过媒体查询中的DPR=2来适应；

 

1. <<移动WEB手册>>　

2. 移动端尺寸基础知识