自適應布局meta標簽中viewport、content、width、initial-scale、minimum-scale、maximum-scale總結

一、先明白幾個概念

phys.width:

device-width:

一般我們所指的寬度width即為phys.width，而device-width又稱為css-width。

其中我們可以獲取phys.width即width通過document.documentElement.clientWidth;而獲取css-width通過 window.screen.width獲取。如iphone6的phys.width為750px，而css-width為375px。

二、明白一個瀏覽器默認行為。

試想，瀏覽器如果把電腦端的980px的網頁展現(xiàn)在寬度為750px的iphone6手機屏上，勢必會放不下，手機端橫向會出現(xiàn)滾動條，怎么阻止這種情況呢，很簡單，瀏覽器默認一個虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認值如：safari iphone：980px;

opera:850px; Andriod webkit:800px;IE:974px;然后會把這個980px虛擬窗口裝進寬度為750px的iphone6中，當然這樣的話必須縮放，這就是為什么在手機中展現(xiàn)電腦端頁面沒有出現(xiàn)橫向滾動條，而且字跡明顯變小的原因。

三、講解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

meta標簽中，width有兩個含義，第一、width為phys.width，第二，width也為虛擬窗口的width。這樣就會有兩個結果：

1、此時的iPhone6的phys.width也變成了css-width即375px，我們可以通過document.documentElement.clientWidth獲取得到此時phys.width確實為375px。

2、如你設計的是375px的手機端頁面，此時的虛擬窗口的寬度也為375px，再裝進phys.width為375px的手機，當然如設計稿一樣的效果，不會縮放，也不會出現(xiàn)橫向滾動條。

四、對響應式布局，媒體查詢的影響

@media only screen and (min-width: 350px) and (max-width: 480px){.....................}

如沒有meta標簽，此時的width當然即為phys.width，iPhone6就不會執(zhí)行上邊的括號里邊的代碼，但是有了meta標簽以后呢，width變成了css-width，即為375px,，所以是會執(zhí)行代碼的。

五、論meta標簽的影響

從上邊可以看出，有了meta標簽以后，原本的iPhone6，即像素比為2的手機，可以按照css-width相同的像素比為1的手機一樣正常顯示，像素比更高的手機也能正常顯示。當然現(xiàn)在andriod的2K屏在meta標簽的幫助下也能正常顯示。即對于開發(fā)者來說，已經可以不管手機的像素比，只需按照css像素編寫代碼即可。

參考鏈接： //www.gxlcms.com/article/121531.htm     
參考鏈接：  //www.gxlcms.com/article/121524.htm

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com