移動端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