一、viewport
PC上的网页宽度一般最小都是1024像素,但是手机屏幕宽度没这么大，浏览器可视区域的尺寸最大也不超过手机屏幕宽度，如果直接显示PC版的网页的话，会挤作一团，排版什么的都会乱掉，怎么办呢？弄一个虚拟的网页显示视窗(viewport)，这个视窗比浏览器可视区域大就可以把PC上的网页显示在手机屏幕上了（移动设备上的浏览器会把自己的viewport设为980或1024），这就是viewport中的第一个概念，layout-viewport。
二、css中的px问题
px是一个抽象相对的像素单位，是指一个逻辑像素，在pc上1个逻辑像素就等于1个物理像素，但在移动端逻辑像素和物理像素并不相等，为什么呢？
移动端的屏幕尺寸非常小，如果1个物理像素等于1个逻辑像素的话，显示出来的文字和图片之类的清晰度不够高不够细腻，怎么办呢？把物理像素提高，即在1个逻辑像素由更多的物理像素。
三、移动端图片模糊的原因
位图像素是栅格图像（如：png,jpg,gif等）最小的数据单元。每一个位图像素都包含着一些自身的显示信息。（如：显示位置，颜色值，透明度等）
理论上来说，1个位图像素对应1个物理像素，图片才能达到清晰的展示。
四、高清屏下html中1px的边框比视觉图中的粗
设计师在视觉标注图上标明边框为1像素，于是你在css中很愉快的写下border:1px，结果悲剧了，在iphone6这种高清屏中看起来1px比较粗。
原因还是上面第2点的知识，1px不等于1个物理像素，在iphone6中1px等于2个物理像素，看着就会比视觉稿上的粗。
五、视觉稿如何还原？
为了适配高清屏，UI一般会以Iphone6的物理分辨率来设计视觉稿，即视觉图的宽度为750px，为什么会选iphone6呢？因为iphone6的尺寸在手机屏幕尺寸中算是一个中间值。
还原视觉稿时，简单粗暴的做法是直接将标注的尺寸除以2来确定宽高（除以2是因为iphone6的dpr为2,750个物理像素的宽度，在iphone6上只需要375个独立像素就能铺满了），这么做在屏幕尺寸更大的手机上，两边就会留白，而在更小尺寸的屏幕上最会显示不全。
转载请注明：⎛蜗牛SEO⎞ » 移动网站开发中的一些概念
