1.在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成我們的一個(gè)錯(cuò)覺，那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
2.CSS中的1PX并不等于設(shè)備的1PX還有一個(gè)因素也會(huì)引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁(yè)面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍；反之把頁(yè)面縮小一倍，css中1px所代表的物理像素也會(huì)減少一倍。
3.利用META標(biāo)簽對(duì)VIEWPORT進(jìn)行控制
移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕要寬的viewport，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？這就該輪到meta標(biāo)簽出場(chǎng)了。 我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：
該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說(shuō)會(huì)出現(xiàn)橫向滾動(dòng)條。 這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢，又都有什么作用呢？
今天給大家分享一下，固定寬度布局開發(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ō)重要性都是十分巨大的。
二.知識(shí)剖析
固定寬度布局？
在移動(dòng)設(shè)備上進(jìn)行網(wǎng)頁(yè)的重構(gòu)或開發(fā)，首先得搞明白的就是移動(dòng)設(shè)備上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關(guān)的meta標(biāo)簽的使用，才能更好地讓我們的網(wǎng)頁(yè)適配或響應(yīng)各種不同分辨率的移動(dòng)設(shè)備。
三.常見問(wèn)題
1.viewport的概念？
2.css中的1px等于設(shè)備的1px嗎？
3.如何利用meta標(biāo)簽對(duì)viewport進(jìn)行控制？
四.解決方案
1.VIEWPORT的概念
通俗的講，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域，在具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(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的寬度要小的。下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度。
2.CSS中的1PX并不等于設(shè)備的1PX
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成我們的一個(gè)錯(cuò)覺，那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
還有一個(gè)因素也會(huì)引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁(yè)面放大一倍，那么css中1px所代表的物理像素也會(huì)增加一倍；反之把頁(yè)面縮小一倍，css中1px所代表的物理像素也會(huì)減少一倍。
3.利用META標(biāo)簽對(duì)VIEWPORT進(jìn)行控制
移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕要寬的viewport，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？這就該輪到meta標(biāo)簽出場(chǎng)了。 我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：
該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說(shuō)會(huì)出現(xiàn)橫向滾動(dòng)條。 這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢，又都有什么作用呢？
meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問(wèn)題。后來(lái)安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。 在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)
把當(dāng)前的viewport寬度設(shè)置為 ideal viewport 的寬度!要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。
中心其實(shí)就是理解什么是css像素和物理像素，簡(jiǎn)單講，一個(gè)任意寬度的屏幕，比如說(shuō)設(shè)置css像素為980px，屏幕每一行所顯示的css內(nèi)容就是980px的css像素內(nèi)容，以下面這個(gè)盒子為例；
盒子的定寬為350px，設(shè)置
屏幕就會(huì)顯示400px的css像素（看下圖可以發(fā)現(xiàn)恰好比350px的盒子寬一點(diǎn)）
如果設(shè)置
屏幕就會(huì)顯示870px個(gè)css像素，（可以看到正好是兩個(gè)盒子350*2多一點(diǎn)）
2.如果沒有下面這行代碼，手機(jī)在訪問(wèn)頁(yè)面過(guò)程中會(huì)默認(rèn)layout viewport為980px，因?yàn)閘ayoutviewport的寬度要默認(rèn)比visual viewport（視覺視口，就是實(shí)際上看到的瀏覽器的頁(yè)面部分）要窄，所以會(huì)出現(xiàn)橫向滾動(dòng)條，并且隨頁(yè)面寬度變化，內(nèi)容大小也會(huì)等比例縮放（因?yàn)槊恳恍幸仢M980px個(gè)css像素）。
3.initial-scale是初始化比例，很多人搞不清楚這個(gè)scale（比例）是相對(duì)于誰(shuí)的比例，其實(shí)這個(gè)是相對(duì)于原本的頁(yè)面css像素，比如下面這個(gè)350px的盒子，如果設(shè)置initial-scale=0.4，那么他顯示的物理像素就會(huì)變成350px*0.4=140px；
4.如果同時(shí)設(shè)置width=750px，initial-scale=1，哪個(gè)大顯示哪個(gè)。
5.如果不設(shè)置viewport的話，設(shè)置@media是無(wú)效的，因?yàn)閷挾瓤偸悄J(rèn)為980px，這里很重要，被坑過(guò)。
7.更多討論
問(wèn)題一：為什么INITIAL-SCALE=1和WIDTH=DEVICE-WIDTH效果一樣，卻要都寫上呢？
問(wèn)題二：瀏覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的VIEWPORT的寬度要小，為什么當(dāng)他在META屬性里設(shè)置寬度卻不會(huì)出現(xiàn)滾動(dòng)條？
8.參考文獻(xiàn)
鳴謝
感謝大家觀看
BY : 黃國(guó)保|馮馨雨|楊綱
WebApp如何實(shí)現(xiàn)多終端下自適應(yīng)？_騰訊視頻
ppt鏈接：https://ptteng.github.io/PPT/PPT/CSS-13-viewport-in-app-yg.html#/2
視頻鏈接：https://v.qq.com/x/page/g05204b0zzc.html
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
