固定寬度佈局開發WebApp如何實現多終端下自適應？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【固定寬度佈局開發WebApp如何實現多終端下自適應？ 】

一.背景介紹
如今人經過手機瀏覽網頁佔了大多數，隨着瀏覽方式的改變，網頁在webapp下面實現多終端自適應，不管是對於避免工程師無謂的重複勞動或者是對於項目管理便捷性上來講都是十分重要的，然而在移動設備上進行網頁的重構或開發，首先得搞明白的就是移動設備上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標籤的使用，才能更好地讓咱們的網頁適配或響應各類不一樣分辨率的移動設備。

二.知識剖析
1.viewport的概念
通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域。

在具體一點，就是瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。

在默認狀況下，通常來說，移動設備上的viewport都是要大於瀏覽器可視區域的，這是由於考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站。

移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，這個是由設備本身決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

瀏覽器的默認viewport的寬度。

2.移動設備哪些因素會引發css中px的變化？

在css中咱們通常使用px做爲單位，在桌面瀏覽器中css的1個像素每每都是對應着電腦屏幕的1個物理像素。但實際狀況卻並不是如此，css中的像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，css中的1px所表明的設備物理像素是不一樣的。

1）從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的（意思就是你分辨率越大，css中1px表明的物理像素就會越多）。

2)用戶對設備界面的縮放，例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。

3.devicePixelRatio屬性

1)它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是

= 物理像素 / 獨立像素。
理解：1.css中的px就能夠看作是設備的獨立像素，因此知道devicePixelRatio，咱們能夠知道該設備上一個css像素表明多少個物理像素。
ps：兼容這塊兒，筆者還沒找到相應的數據支持。可是在平常應用中，基本上主流的手機，都支持。有興趣的小夥伴能夠研究一下。

舉個栗子：在Retina屏的iphone上，devicePixelRatio的值爲2，也就是說1個css像素至關於2個物理像素。

4.ideal viewport——完美適配移動設備的理想viewport。

所謂的完美適配（一般意義下，攻城獅口中的自適應）指的是:

1)不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容；

2)顯示的文字的大小是合適，好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。

ideal viewport並無一個固定的尺寸，不一樣的設備擁有有不一樣的ideal viewport。全部的phone的ideal viewport寬度都是320px，不管它的屏幕寬度是320仍是640，也就是說，在iphone屏幕寬度在640px如下中，css中的320px就表明iphone屏幕的寬度。

不一樣分辨率的安卓手機上，devicePixelRatio的值能正好填充全屏寬度：

不一樣分辨率手機上，devicePixelRatio的值能正好填充全屏寬度

三.常見問題。
1）.在進行移動設備網站的開發時，如何控制ideal viewport呢？

咱們在開發移動設備的網站時，最多見的的一個動做就是把下面這個東西複製到咱們的head標籤中：

<meta
標籤解讀：

標籤解讀

在安卓中還支持 target-densitydpi 這個私有屬性，它表示目標設備的密度等級，做用是決定css中的1px表明多少物理像素

target-densitydpi： 值能夠爲一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

注意：當 target-densitydpi=device-dpi 時， css中的1px會等於物理像素中的1px。

2）把當前的viewport寬度設置爲 ideal viewport 的寬度。

<meta name="viewport" content="width=device-width">

代碼在 各大移動端瀏覽器上的測試結果

能夠看到經過width=device-width，全部瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。

上面這串代碼還有另外一種寫法：

<meta name="viewport" content="initial-scale=1">`
四.擴展——關於meta viewport的更多知識。
1.關於縮放
縮放是相對於ideal viewport來縮放的，縮放值越大，當前viewport的寬度就會越小，反之亦然。
舉個栗子：在iphone中，ideal viewport的寬度是320px，若是咱們設置 initial-scale=2 ，此時viewport的寬度會變爲只有160px了

理解：就是原來1px的東西變成2px了，可是1px變爲2px並非把原來的320px變爲640px了，而是在實際寬度不變的狀況下，1px變得跟原來的2px的長度同樣了，因此放大2倍後原來須要320px才能填滿的寬度如今只須要160px就作到了。所以，咱們能夠得出一個公式：

visual viewport寬度 = ideal viewport寬度  / 當前縮放值 當前縮放值 = ideal viewport寬度  / visual viewport寬度
ps: visual viewport的寬度指的是瀏覽器可視區域的寬度。ideal viewport寬度指的是完美適配移動設備的寬度

2.initial-scale的默認值是多少？
initial-scale的默認值很顯然不會是1，由於當 initial-scale = 1 時，當前的layout viewport寬度會被設爲 ideal viewport的寬度，但前面說了，各瀏覽器默認的 layout viewport寬度通常都是980啊，1024啊，800啊等等這些個值，沒有一開始就是 ideal viewport的寬度的。

ps：layout viewport在手機瀏覽器上面的默認值是980px。

安卓設備上的initial-scale默認值：若是沒有設置的話，就沒有，必定要設置，這個屬性纔會起做用。

iphone和ipad上的initial-scale默認值：

測試：在iphone上，咱們不設置任何的viewport meta標籤，此時layout viewport的寬度爲980px，但咱們能夠看到瀏覽器並無出現橫向滾動條，瀏覽器默認的把頁面縮小了。根據上面的公式，當前縮放值 = ideal viewport寬度 / visual viewport寬度，咱們能夠得出：

當前縮放值 = 320 / 980，也就是當前的initial-scale默認值是 0.33這樣子。

結論：在iphone和ipad上，不管你給viewport設的寬的是多少，若是沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的。

這裏樓主有個踩坑經歷：http://www.jianshu.com/p/232a...

3.js動態改變meta viewport標籤
第一種方法

可使用document.write來動態輸出meta viewport標籤，例如：

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
第二種方法

js經過setAttribute來改變

meta ="testViewport" ="viewport" ="width = 380">script>var mvp = document.getElementById('testViewport'); mvp.setAttribute('content','width=480');script>
五.總結
獲得縮放值的公式：

當前縮放值 = ideal viewport寬度  / visual viewport寬度//visual viewport寬度指的是瀏覽器可視區域的寬度。//ideal viewport寬度指的是完美適配移動設備的寬度
若是表示不理解本文的內容，在head部分加上這串代碼也能夠解決網頁自適應移動app的這個問題：

<meta
提示：若是不設置meta viewport標籤，移動設備上瀏覽器默認的寬度值爲800px，980px，1024px等這些，總之是大於屏幕寬度的（意思就是說，會不自適應手機端的頁面）

仍是剛纔那個踩坑經歷：http://www.jianshu.com/p/232a...（迷迷糊糊的太難受了）

本文大部份內容來自：http://www.cnblogs.com/2050/p...
本人從新排版，以及對重點內容進行標註，和精簡。
原文較爲詳細，細細閱讀，理解更加深入。

後話：確實，當咱們在開發移動設備上的網頁時，無論你明不明白什麼是viewport，可能你只須要這麼一句代碼就夠了。當有時候，咱們要知其然，更要知其因此然，當你明白了其中的原理，對其使用就會更加駕輕就熟，不會迷迷糊糊，連這串代碼是什麼意思都不知道。老大曾經說過一句話：當你達到必定高度的時候，你的理論知識才能決定你能走多遠。共勉。

視頻連接：https://v.qq.com/x/page/u0391...

ppt連接：https://ptteng.github.io/PPT/...

 

 成果展現