關於MVC的信息

1. 什麼是viewport

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

2. viewport是用來幹什麼的

   viewport的默認值，通常來講是大於手機屏幕的。這樣就能夠作到當咱們在瀏覽桌面端網頁的時候，可讓桌面端端網頁正常顯示（咱們普通頁面設計的時候，通常頁面的主區域是以960px來作的，因此980px這個值，能夠作到桌面端網頁的正常顯示）。可是，其實咱們手機的屏幕寬度是沒有960px的，所以瀏覽器會出現橫向滾動條。同時，即便是基於980的viewport，咱們在移動端瀏覽咱們的桌面頁面的體驗其實也並很差，因此，通常的，咱們會專門給瀏覽器設計一個移動端的頁面。

3. 對viewport的控制

   現在能夠絕大部分瀏覽器裏（即主流的安卓瀏覽器和ios），都支持對viewport的一個控制了。通常的，咱們會這麼寫。

   viewport默認有6個屬性

   • width: 設置viewport的寬度（即以前所說起到的，瀏覽器的寬度詳），這裏能夠爲一個整數，又或者是字符串"width-device"
   • initial-scale: 頁面初始的縮放值，爲數字，能夠是小數
   • minimum-scale: 容許用戶的最小縮放值，爲數字，能夠是小數
   • maximum-scale: 容許用戶的最大縮放值，爲數字，能夠是小數
   • height: 設置viewport的高度（咱們通常而言並不能用到）
   • user-scalable: 是否容許用戶進行縮放，'no'爲不容許，'yes'爲容許

   咱們把這個標籤是在head裏面，像這樣

   <meta name="viewport" content="initial-scale=1">

   這樣就能夠作到對viewport的控制了

二. 關於咱們的設備

1. 三個須要瞭解的概念:

   • PPI: 能夠理解爲屏幕的顯示密度
   • DPR: 設備物理像素和邏輯像素的對應關係，即物理像素/邏輯像素
   • Resolution: 就是咱們常說的分辨率

2. 物理像素與邏輯像素

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

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

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

3. CSS的問題

   有了上面第二點的一些基礎，仍是以iphone6爲例，咱們能夠知道，其實咱們所寫的1px，在iphone6上爲2px的物理像素。因此，最後的，給出一個結論。就是咱們寫的1px，在移動端，是邏輯像素的1px，而非物理像素的1px。