一、先明白幾個概念

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的網(wǎng)頁展現(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ā)者來說，已經(jīng)可以不管手機的像素比，只需按照css像素編寫代碼即可。

參考鏈接： http://www.dbjr.com.cn/article/121531.htm     
參考鏈接：  http://www.dbjr.com.cn/article/121524.htm

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!

最新評論