移动端适配（高清）

背景： 

1. 开发移动端H5页面
2. 面对不同分辨率的手机
3. 面对不同屏幕尺寸的手机

 

DPR也就是设备像素比

设备像素比（dpr） = 设备像素（分辨率）/设备独立像素（屏幕尺寸）

布局视窗：屏幕大小

视觉视窗：为了解决PC端网站在移动端显示不佳，布局视窗比设备屏幕宽度宽，一般为980

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

这行代码把视觉视窗大小设置成和布局视窗大小相等，这样我们在代码设置css像素时，设置的跟渲染出来效果也是一样。

几个问题

这里说一下，移动端H5开发，在不同分辨率，不同屏幕手机下会遇到的几个经典问题。

retina下，图片高清问题

这个问题上面已经介绍过解决方案了：两倍图片(@2x)，然后图片容器缩小50%

详情见:http://www.html-js.com/article/3041