移動端viewport解惑

咱們在作移動端webapp的時候須要設置這麼一段：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

再配合媒體查詢@media就能夠寫出適配各類手機端的頁面了。可是，爲何就可以了呢？

網上查了不少資料，反覆看了不少遍仍是似懂非，知道看了知乎中一個問題的解答，茅塞頓開。

 

本身不明白三個點，其中viewport，width，device-width分別表明什麼？

viewport瀏覽器的窗口，顯示網頁內容的區域。width指這個viewport即瀏覽器窗口寬度。

device-width設備獨立像素，邏輯像素。聽着很抽象，那就按照字面理解，設備的寬度，這個寬度就是咱們css常寫px概念是同樣的。如電腦端的屏幕px寬度，手機的屏幕px寬度。它並不指像英寸，釐米這樣的物理尺寸。這些都是手機廠商設的，出廠就設定了。以前一直有誤區把device-width和物理尺寸對應起來，因此一直想不明白。

chrome：f12能夠看到device-width

          

 

下面就簡單說說下本身對下面代碼的理解。

<meta name="viewport" content="width=device-width> 

咱們電腦上網通常都是全屏查看網頁，這個全屏就是電腦的屏幕，電腦瀏覽器窗口=電腦屏幕區域。即viewport=device-width。可是手機瀏覽器窗口>手機屏幕區域。

之前手機瀏覽一些網頁都要經過手指調整查看內容的區域。這樣用戶體驗就很差。爲了改善這樣狀況，手機手機廠家就給我想出瞭解決辦法：

name="viewport" content="width=device-width

這個設置意思就指讓手機瀏覽器的窗口等於手機屏幕大小。這樣一來在手機上查看就跟咱們在電腦上全屏看網頁同樣啦。

 

咱們作手機端的網頁寬度就是根據這個device-width寫的。

見：https://www.cnblogs.com/tu-0718/p/9596894.html#undefined

網上看了不少資料，給的概念太多，建議看如下幾篇文章就差很少了，不懂得多看多想就通。

https://www.jianshu.com/p/fb982ea8dce3

https://www.jianshu.com/p/bb76c606f0b4

https://www.zhihu.com/question/28082877