什么是viewport

簡單來講，viewport就是瀏覽器上，用來顯示網頁的那一部分區域了，也就是說，瀏覽器的實際寬度，是和我們手機的寬度不一樣的，無論你的手機寬度是320px，還是640px，在手機瀏覽器內部的寬度，始終會是瀏覽器本身的viewport。如今的瀏覽器，都會給自己的本身提供一個viewport的默認值，可能是980px，或者是其他值。就以手機來說吧，目前，新版本的手機瀏覽器，絕大部分是以980px作為默認的viewport值的。我這里對新版本的不同平臺下的瀏覽器做了測試，經過測試，iphone下的默認viewport為980px，安卓下的瀏覽器，目前主流的最新瀏覽器（比如chrome，還有很多國產的像qq，uc）的viewport也是980px了。

viewport是用來干什么的

viewport的默認值，一般來說是大于手機屏幕的。這樣就可以做到當我們在瀏覽桌面端網頁的時候，可以讓桌面端端網頁正常顯示（我們普通頁面設計的時候，一般頁面的主區域是以960px來做的，所以980px這個值，可以做到桌面端網頁的正常顯示）。但是，其實我們手機的屏幕寬度是沒有960px的，因此瀏覽器會出現橫向滾動條。同時，即使是基于980的viewport，我們在移動端瀏覽我們的桌面頁面的體驗其實也并不好，所以，一般的，我們會專門給瀏覽器設計一個移動端的頁面。

對viewport的控制

如今可以絕大部分瀏覽器里（即主流的安卓瀏覽器和ios），都支持對viewport的一個控制了。一般的，我們會這么寫。

viewport默認有6個屬性

• width: 設置viewport的寬度（即之前所提及到的，瀏覽器的寬度詳），這里可以為一個整數，又或者是字符串"width-device"
• initial-scale: 頁面初始的縮放值，為數字，可以是小數
• minimum-scale: 允許用戶的最小縮放值，為數字，可以是小數
• maximum-scale: 允許用戶的最大縮放值，為數字，可以是小數
• height: 設置viewport的高度（我們一般而言并不能用到）
• user-scalable: 是否允許用戶進行縮放，'no'為不允許，'yes'為允許

我們把這個標簽是在head里面，像這樣

這樣就可以做到對viewport的控制了

三個需要了解的概念:

• PPI: 可以理解為屏幕的顯示密度
• DPR: 設備物理像素和邏輯像素的對應關系，即物理像素/邏輯像素
• Resolution: 就是我們常說的分辨率

物理像素與邏輯像素

看了我們上面內容一的第一點之后，或許有些人會有些疑問，我的安卓手機，或者iphone6plus(目前應該僅限于這一款機型吧)，買回來的是1920x1080的或者其他更高的，比我之前所謂的那個viewport默認的980px要大。

這樣的問題，也就是我之前所說的物理像素與邏輯像素的關系了（即DPR）。以1920x1080為例，1080為物理像素，而我們在viewport中，獲取到的，比如"width-device"，是邏輯像素。所以之前viewport的默認值，所比對的大小，其實是邏輯像素的大小，而非物理像素的大小。

以iphone6為例，在不做任何縮放的條件下，iphone6的獲取到的'width-device'為375px,為屏幕的邏輯像素。而購買時我們所知的750px，則為屏幕的物理像素。

CSS的問題

有了上面第二點的一些基礎，還是以iphone6為例，我們可以知道，其實我們所寫的1px，在iphone6上為2px的物理像素。所以，最后的，給出一個結論。就是我們寫的1px，在移動端，是邏輯像素的1px，而非物理像素的1px。