一、先明白幾個概念
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的網頁展現在寬度為750px的iphone6手機屏上，勢必會放不下，手機端橫向會出現滾動條，怎么阻止這種情況呢，很簡單，瀏覽器默認一個虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認值如：safari iphone：980px;
opera:850px; Andriod webkit:800px;IE:974px;然后會把這個980px虛擬窗口裝進寬度為750px的iphone6中，當然這樣的話必須縮放，這就是為什么在手機中展現電腦端頁面沒有出現橫向滾動條，而且字跡明顯變小的原因。
三、講解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1
meta標簽中，width有兩個含義，第一、width為phys.width，第二，width也為虛擬窗口的width。這樣就會有兩個結果：
第一、此時的iPhone6的phys.width也變成了css-width即375px，我們可以通過document.documentElement.clientWidth獲取得到此時phys.width確實為375px。
第二、如你設計的是375px的手機端頁面，此時的虛擬窗口的寬度也為375px，再裝進phys.width為375px的手機，當然如設計稿一樣的效果，不會縮放，也不會出現橫向滾動條。
四、對響應式布局，媒體查詢的影響
@media only screen and (min-width: 350px) and (max-width: 480px){.....................}
如沒有meta標簽，此時的width當然即為phys.width，iPhone6就不會執行上邊的括號里邊的代碼，但是有了meta標簽以后呢，width變成了css-width，即為375px,，所以是會執行代碼的。
五、論meta標簽的影響
從上邊可以看出，有了meta標簽以后，原本的iPhone6，即像素比為2的手機，可以按照css-width相同的像素比為1的手機一樣正常顯示，像素比更高的手機也能正常顯示。當然現在andriod的2K屏在meta標簽的幫助下也能正常顯示。即對於開發者來說，已經可以不管手機的像素比，只需按照css像素編寫代碼即可。