移动端基本概念

viewport的<meta>标签用法

其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大

移动端开发中，通常我们都会采用<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">来设置viewport

• width: 设置viewport的宽度，这里可以为一个整数，又或者是字符串"width-device"
• initial-scale: 页面初始的缩放值，为数字，可以是小数
• minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
• maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
• height: 设置viewport的高度（一般而言并不能用到）
• user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许

 

 viewport是什么?

通俗来讲，移动端的viewport就是我们所能看到的手机端浏览器的可视窗口大小，但viewport又不仅仅局限于可视窗口的大小，一般情况下，它是比默认窗口大小要大的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动端正常显示为桌面浏览器而设计的网页，移动端的浏览器都会默认把自己的默认的viewport设为980px到1024px不等，但其后果就是会出现横向滚动条，因为移动端浏览器可视区域的大小是比默认的viewport宽度要小的。

 

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

 

设备独立像素(density-independent pixel) 或 CSS像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，就是设备像素比。

 

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素     // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

综合上面几个概念，一起举例说明下：

以iphone6为例：

1. 设备宽高为375×667，可以理解为设备独立像素(或css像素)。
2. dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。

用一张图来表现：

 

 

 

上图中可以看出，对于这样的css样式：

width: 2px;

height: 2px;

宽高各放大了2倍，那就是4倍，dpr的平方

 

在不同的屏幕上(普通屏幕 vs retina屏幕)

共同点：css像素所呈现的大小(物理尺寸)是一致的

 

不同点：1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。

	普通屏幕	retina屏幕
设备独立像素（ CSS像素）	1	1
物理像素	1	4

 

 

 

 

 

 

 设备像素比 = 物理像素 / 设备独立像素 

    var dpr = window.devicePixelRatio || 1;//屏幕设备像素比，如果获取不到屏幕设备像素比，就设置为1，

    //屏幕分辨率
    var bodyW = window.screen.width;//屏幕分辨率的宽
    var bodyH = window.screen.height;//屏幕分辨率的高

    //物理像素
    var pxW = bodyW * dpr;//物理像素的宽
    var pxH = bodyH * dpr;//物理像素的高

 

 

 

参考文章：

移动端高清、多屏适配方案：http://www.cnblogs.com/lovesueee/p/4618454.html#3254833

从淘宝适配布局谈移动端适配:http://www.qdfuns.com/notes/23659/5e3cd2904a56f5e6b86c4d49e90e0f34.html

浅谈前端移动端页面开发（布局篇）：http://www.xiaoxiangzi.com/Programme/CSS/4298.html