大家好幻工，我是IT修真院深圳分院第01期學(xué)員励两，一枚正直純潔善良的web程序員。
今天給大家分享一下囊颅，修真院官網(wǎng)CSS任務(wù)13当悔，深度思考中的知識(shí)點(diǎn)——固定寬度布局開(kāi)發(fā)WebApp如何實(shí)現(xiàn)多終端下自適應(yīng)？
一踢代、背景介紹
現(xiàn)在人通過(guò)手機(jī)瀏覽網(wǎng)頁(yè)占了大多數(shù)盲憎，隨著瀏覽方式的改變，網(wǎng)頁(yè)在webapp下面實(shí)現(xiàn)多終端自適應(yīng)胳挎，無(wú)論對(duì)于避免工程師無(wú)謂的重復(fù)勞動(dòng)或者是項(xiàng)目管理的便捷性上來(lái)說(shuō)重要性都是十分巨大的饼疙。
然而在移動(dòng)設(shè)備上進(jìn)行網(wǎng)頁(yè)的重構(gòu)或開(kāi)發(fā)，首先得搞明白的就是移動(dòng)設(shè)備上的viewport了慕爬，只有明白了viewport的概念以及弄清楚了跟viewport有關(guān)的meta標(biāo)簽的使用窑眯，才能更好地讓我們的網(wǎng)頁(yè)適配或響應(yīng)各種不同分辨率的移動(dòng)設(shè)備屏积。
自適應(yīng)和響應(yīng)式的區(qū)別？
其實(shí)RWD和AWD都是響應(yīng)式設(shè)計(jì)磅甩，從外觀(guān)上很難分辨肾请，但他們自己運(yùn)行機(jī)理不同，RWD是主動(dòng)式的響應(yīng)設(shè)計(jì)更胖，AWD是被動(dòng)式的響應(yīng)式設(shè)計(jì)，RWD不管用戶(hù)使用的是什么設(shè)備都是在服務(wù)器把數(shù)據(jù)推送到瀏覽器后隔显，腳本或CSS自行偵測(cè)屏幕大小后執(zhí)行對(duì)應(yīng)的樣式表內(nèi)容却妨，并且一直通過(guò)本地腳本在監(jiān)聽(tīng)屏幕大小的變化，隨時(shí)做出樣式響應(yīng)的變化括眠，所以是主動(dòng)的彪标。但AWD是用戶(hù)通過(guò)瀏覽器發(fā)送請(qǐng)求后，服務(wù)器根據(jù)請(qǐng)求中夾帶的用戶(hù)設(shè)備設(shè)備信息做出判斷掷豺，調(diào)用已經(jīng)在服務(wù)器里準(zhǔn)備好的捞烟，適應(yīng)對(duì)應(yīng)設(shè)備樣式文件+HTML內(nèi)容+JS，返回給瀏覽器以這種方式響應(yīng)不同設(shè)備当船。
二题画、知識(shí)剖析
2.1.Viewport的概念
1).通俗的講，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域德频。
2).在具體一點(diǎn)苍息，就是瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小壹置，它可能比瀏覽器的可視區(qū)域要大竞思，也可能比瀏覽器的可視區(qū)域要小。
3).在默認(rèn)情況下钞护，一般來(lái)講盖喷，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小难咕，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站课梳。
移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的）余佃，但帶來(lái)的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條惦界，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。
這里有一張瀏覽器的默認(rèn)viewport寬度值的表咙冗，可以看下沾歪。
2.2.移動(dòng)設(shè)備哪些因素會(huì)引起css中px的變化？
在css中我們一般使用px作為單位雾消，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素灾搏。但實(shí)際情況卻并非如此挫望，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中狂窑，css中的1px所代表的設(shè)備物理像素是不同的媳板。
1）從iphone4開(kāi)始，蘋(píng)果公司便推出了所謂的Retina屏泉哈，分辨率提高了一倍蛉幸，變成640x960，但屏幕尺寸卻沒(méi)變化丛晦，這就意味著同樣大小的屏幕上奕纫，像素卻多了一倍，這時(shí)烫沙，一個(gè)css像素是等于兩個(gè)物理像素的（意思就是你分辨率越大匹层，css中1px代表的物理像素就會(huì)越多）。
2)用戶(hù)對(duì)設(shè)備界面的縮放锌蓄，例如升筏，當(dāng)用戶(hù)把頁(yè)面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍瘸爽；反之把頁(yè)面縮小一倍您访，css中1px所代表的物理像素也會(huì)減少一倍。
2.3.devicePixelRatio屬性
1)它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例剪决，也就是devicePixelRatio =物理像素/獨(dú)立像素洋只。
理解：css中的px可以看做是設(shè)備的獨(dú)立像素，所以知道devicePixelRatio昼捍，我們可以知道該設(shè)備上一個(gè)css像素代表多少個(gè)物理像素识虚。
舉個(gè)栗子：在Retina屏的iphone上，devicePixelRatio的值為2妒茬，也就是說(shuō)1個(gè)css像素相當(dāng)于2個(gè)物理像素担锤。
2.4.ideal viewport——完美適配移動(dòng)設(shè)備的理想viewport。
所謂的完美適配（通常意義下乍钻，攻城獅口中的自適應(yīng)）指的是:
1)不需要用戶(hù)縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容肛循；
2)顯示的文字的大小是合適，比如一段14px大小的文字银择，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清多糠，理想的情況是這段14px的文字無(wú)論是在何種密度屏幕，何種分辨率下浩考，顯示出來(lái)的大小都是差不多的夹孔。
三、常見(jiàn)問(wèn)題
在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開(kāi)發(fā)時(shí)，如何控制ideal viewport呢搭伤？
四只怎、解決方案
我們?cè)陂_(kāi)發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見(jiàn)的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：
<meta name="viewport"content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
name="viewport" content="width=device-width"———把當(dāng)前的viewport寬度設(shè)置為ideal viewport的寬度怜俐。
width=device-width ——設(shè)置layout viewport的寬度身堡，為一個(gè)正整數(shù)，或字符串"width-device"
initial-scale ——設(shè)置頁(yè)面的初始縮放值拍鲤，為一個(gè)數(shù)字贴谎，可以帶小數(shù)
minimum-scale ——允許用戶(hù)的最小縮放值，為一個(gè)數(shù)字季稳，可以帶小數(shù)
maximum-scale ——允許用戶(hù)的最大縮放值擅这，為一個(gè)數(shù)字，可以帶小數(shù)
user-scalable ——是否允許用戶(hù)進(jìn)行縮放绞幌，值為"no"或"yes", no代表不允許，yes代表允許
target-densitydpi： 值可以為一個(gè)數(shù)值或high-dpi一忱、medium-dpi莲蜘、low-dpi、device-dpi這幾個(gè)字符串中的一個(gè)
注意：當(dāng)target-densitydpi=device-dpi時(shí)帘营，css中的1px會(huì)等于物理像素中的1px票渠。
5.編碼實(shí)戰(zhàn)
詳見(jiàn)視頻
六、拓展思考
6.1.關(guān)于縮放
這里指的縮放芬迄，是相對(duì)于ideal viewport來(lái)縮放的问顷，縮放值越大，當(dāng)前viewport的寬度就會(huì)越小禀梳，反之亦然杜窄。
舉個(gè)栗子：在iphone中，ideal viewport的寬度是320px算途，如果我們?cè)O(shè)置initial-scale=2塞耕，此時(shí)viewport的寬度會(huì)變?yōu)橹挥?60px了
理解：就是原來(lái)1px的東西變成2px了，但是1px變?yōu)?px并不是把原來(lái)的320px變?yōu)?40px了嘴瓤，而是在實(shí)際寬度不變的情況下扫外，1px變得跟原來(lái)的2px的長(zhǎng)度一樣了，所以放大2倍后原來(lái)需要320px才能填滿(mǎn)的寬度現(xiàn)在只需要160px就做到了廓脆。因此筛谚，我們可以得出一個(gè)公式：
visual viewport寬度= ideal viewport寬度/當(dāng)前縮放值；
當(dāng)前縮放值= ideal viewport寬度/ visual viewport寬度
6.2.initial-scale的默認(rèn)值是多少停忿？
initial-scale的默認(rèn)值很顯然不會(huì)是1驾讲，因?yàn)楫?dāng)initial-scale = 1時(shí)，當(dāng)前的layout viewport寬度會(huì)被設(shè)為ideal viewport的寬度，但前面說(shuō)了蝎毡，各瀏覽器默認(rèn)的layout viewport寬度一般都是980啊厚柳，1024啊，800啊等等這些個(gè)值沐兵，沒(méi)有一開(kāi)始就是ideal viewport的寬度的别垮。
安卓設(shè)備上的initial-scale默認(rèn)值：如果沒(méi)有設(shè)置的話(huà)，就沒(méi)有扎谎，一定要設(shè)置碳想，這個(gè)屬性才會(huì)起作用。
iphone和ipad上的initial-scale默認(rèn)值：
測(cè)試：在iphone上毁靶，我們不設(shè)置任何的viewport meta標(biāo)簽胧奔，此時(shí)layout viewport的寬度為980px，但我們可以看到瀏覽器并沒(méi)有出現(xiàn)橫向滾動(dòng)條预吆，瀏覽器默認(rèn)的把頁(yè)面縮小了龙填。根據(jù)上面的公式，當(dāng)前縮放值= ideal viewport寬度/ visual viewport寬度拐叉，我們可以得出：
當(dāng)前縮放值= 320 / 980岩遗，也就是當(dāng)前的initial-scale默認(rèn)值是0.33這樣子。
6.3.總結(jié)得到縮放值的公式：
當(dāng)前縮放值= ideal viewport寬度/ visual viewport寬度
//visual viewport寬度指的是瀏覽器可視區(qū)域的寬度凤瘦。
//ideal viewport寬度指的是完美適配移動(dòng)設(shè)備的寬度
提示：如果不設(shè)置meta viewport標(biāo)簽宿礁，移動(dòng)設(shè)備上瀏覽器默認(rèn)的寬度值為800px，980px蔬芥，1024px等這些梆靖，總之是大于屏幕寬度的（意思就是說(shuō)，會(huì)不自適應(yīng)手機(jī)端的頁(yè)面）
七笔诵、參考文獻(xiàn)
參考一：移動(dòng)前端開(kāi)發(fā)之viewport的深入理解
參考二：Responsive design 和 Adaptive design 的區(qū)別返吻？
八、更多討論
1.自適應(yīng)和響應(yīng)式各有什么優(yōu)劣乎婿？
2.網(wǎng)頁(yè)自適應(yīng)設(shè)計(jì)常見(jiàn)問(wèn)題有哪些思喊？
3.有哪些常見(jiàn)的布局方式？
感謝大家觀(guān)看
今天的分享就到這里啦次酌，歡迎大家點(diǎn)贊恨课、轉(zhuǎn)發(fā)、留言岳服、拍磚~
你可以直接點(diǎn)擊此鏈接與我一起學(xué)習(xí)：邀請(qǐng)碼
