固定寬度佈局開發WEBAPP如何實現多終端下自適應？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【 固定寬度佈局開發WEBAPP如何實現多終端下自適應？】
大家好，我是IT修真院北京分院第22期的學員楊綱，一枚正直純潔善良的WEB前端程式設計師。
1.在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的一個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是一個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。
2.CSS中的1PX並不等於裝置的1PX還有一個因素也會引起css中px的變化，那就是使用者縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理畫素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理畫素也會減少一倍。
3.利用META標籤對VIEWPORT進行控制
移動裝置預設的viewport是layout viewport，也就是那個比螢幕要寬的viewport，但在進行移動裝置網站的開發時，我們需要的是ideal viewport。那麼怎麼才能得到ideal viewport呢？這就該輪到meta標籤出場了。 我們在開發移動裝置的網站時，最常見的的一個動作就是把下面這個東西複製到我們的head標籤中：
該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。也許允不允許使用者縮放不同的網站有不同的要求，但讓viewport的寬度等於裝置的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比螢幕寬的預設viewport，也就是說會出現橫向滾動條。 這個name為viewport的meta標籤到底有哪些東西呢，又都有什麼作用呢？
今天給大家分享一下，固定寬度佈局開發WEBAPP如何實現多終端下自適應？
一.背景介紹
現在人們通過手機瀏覽網頁佔了大多數，隨著瀏覽方式的改變，網頁在webapp下面實現多終端自適應，無論對於避免工程師無謂的重複勞動或者是專案管理的便捷性上來說重要性都是十分巨大的。
二.知識剖析
固定寬度佈局？
在移動裝置上進行網頁的重構或開發，首先得搞明白的就是移動裝置上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標籤的使用，才能更好地讓我們的網頁適配或響應各種不同解析度的移動裝置。
三.常見問題
1.viewport的概念？
2.css中的1px等於裝置的1px嗎？
3.如何利用meta標籤對viewport進行控制？
四.解決方案
1.VIEWPORT的概念
通俗的講，移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分割槽域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，一般來講，移動裝置上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能在移動裝置上正常顯示那些傳統的為桌面瀏覽器設計的網站---
移動裝置上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，這個是由裝置自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個預設的viewport的寬度要小的。下圖列出了一些裝置上瀏覽器的預設viewport的寬度。
2.CSS中的1PX並不等於裝置的1PX
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的一個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是一個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。
還有一個因素也會引起css中px的變化，那就是使用者縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理畫素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理畫素也會減少一倍。
3.利用META標籤對VIEWPORT進行控制
移動裝置預設的viewport是layout viewport，也就是那個比螢幕要寬的viewport，但在進行移動裝置網站的開發時，我們需要的是ideal viewport。那麼怎麼才能得到ideal viewport呢？這就該輪到meta標籤出場了。 我們在開發移動裝置的網站時，最常見的的一個動作就是把下面這個東西複製到我們的head標籤中：
該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。也許允不允許使用者縮放不同的網站有不同的要求，但讓viewport的寬度等於裝置的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比螢幕寬的預設viewport，也就是說會出現橫向滾動條。 這個name為viewport的meta標籤到底有哪些東西呢，又都有什麼作用呢？
meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支援，事實也證明這個東西還是非常有用的。 在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)
把當前的viewport寬度設定為 ideal viewport 的寬度!要得到ideal viewport就必須把預設的layout viewport的寬度設為移動裝置的螢幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了。
中心其實就是理解什麼是css畫素和物理畫素，簡單講，一個任意寬度的螢幕，比如說設定css畫素為980px，螢幕每一行所顯示的css內容就是980px的css畫素內容，以下面這個盒子為例；
盒子的定寬為350px，設定
螢幕就會顯示400px的css畫素（看下圖可以發現恰好比350px的盒子寬一點）
如果設定
螢幕就會顯示870px個css畫素，（可以看到正好是兩個盒子350*2多一點）
2.如果沒有下面這行程式碼，手機在訪問頁面過程中會預設layout viewport為980px，因為layoutviewport的寬度要預設比visual viewport（視覺視口，就是實際上看到的瀏覽器的頁面部分）要窄，所以會出現橫向滾動條，並且隨頁面寬度變化，內容大小也會等比例縮放（因為每一行要鋪滿980px個css畫素）。
3.initial-scale是初始化比例，很多人搞不清楚這個scale（比例）是相對於誰的比例，其實這個是相對於原本的頁面css畫素，比如下面這個350px的盒子，如果設定initial-scale=0.4，那麼他顯示的物理畫素就會變成350px*0.4=140px；
4.如果同時設定width=750px，initial-scale=1，哪個大顯示哪個。
5.如果不設定viewport的話，設定@media是無效的，因為寬度總是預設為980px，這裡很重要，被坑過。
7.更多討論
問題一：為什麼INITIAL-SCALE=1和WIDTH=DEVICE-WIDTH效果一樣，卻要都寫上呢？
問題二：瀏覽器可視區域的寬度是比這個預設的VIEWPORT的寬度要小，為什麼當他在META屬性裡設定寬度卻不會出現滾動條？
8.參考文獻
鳴謝
感謝大家觀看
BY : 黃國保|馮馨雨|楊綱
WebApp如何實現多終端下自適應？_騰訊視訊
ppt連結：https://ptteng.github.io/PPT/PPT/CSS-13-viewport-in-app-yg.html#/2
視訊連結：https://v.qq.com/x/page/g05204b0zzc.html
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！
https://ptteng.github.io/PPT/PPT/CSS-13-viewport-in-app-yg.html#/2
作者：古碑先生
連結：https://www.jianshu.com/p/dbe8222f091a
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地