移动端Web页面适配方案

概念理解

viewport视口

• visual viewport 可见视口，设备屏幕的宽度  windw.innerWidth/Height
• layout viewport 布局视口，DOM宽度　　 document.documentElement.cliendWidth/Heig

ideal viewport 理想视口：目标是让把默认的layout viewport宽度设置为移动设备的屏幕宽度

• 　　visual viewport = layout viewport * scale

<meta name="viewport" content="width=device-width,initial-scale=1">width: viewport宽度initial-scale:页面初始缩放maximum/minimum-scale:允许用户缩放的最小/最大比例user-scalable:yes/no是否允许用户手动缩放

像素的一些事

物理像素（physical pixel）

设备像素，设备中的最小一个物理部件。比如说，一倍屏、二倍屏（Retina）、三倍屏指的是以多少物理像素来显示一个CSS像素。Retina屏幕，一个css像素对应4个物理像素。

css像素

css像素是抽象单位，主要用在浏览器上。CSS称为设备无关的像素（device-independent pixel）简称DIPs。

早起iphone3的分辨率是320x480，retina屏幕的分辨率640x960，屏幕尺寸不变但是像素提高了一倍。这时候，一个css像素等于两个物理像素。

设备像素比dpr（device pixel ratio）

设备像素比 = 物理像素/设备独立像素 （对于retina屏的iphone，dpr = 2，即1css像素相等于2个物理像素）

viewport的scale和dpr互为倒数。

• JavaScript：window.devicePixelRatio
• CSS: -webkit-device-pixel-ration, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio

前端适配的相关方法：

viewport

http://caibaojian.com/mobile-responsive-example.html

https://www.cnblogs.com/2050/p/3877280.html

https://segmentfault.com/a/1190000008767416#articleHeader7

https://github.com/riskers/blog/issues/18

原文地址：https://www.cnblogs.com/ninalei/p/8685105.html