移動篇 視口viewport

　　最近在看奇舞團新書<<移動WEB手冊>>，心得以下：

　　在WEB的響應式設計出來以前，若是直接在手機設備上顯示針對PC端的網站，由於屏幕的分辨率很小，每每出現的是橫縱方向的滾動條，並且字體很小。爲了更好的顯示效果，就須要將網站針對小屏幕作出相應的適配。

　　佈局視口：在移動端瀏覽器，網站所展示的界面寬度、樣式；

　　視覺視口：在移動端瀏覽器，用戶經過手機能夠看到網站界面，能夠是所有、也能夠是部分（有橫縱滾動條）。

　　最優的效果是將佈局視口侷限在視覺視口中，限制橫向滾動條的出現，好比：在Retina出現以前，手機屏幕的分辨率在320px/480px，能夠針對這種分辨率級別的設備來適配網站設計；可是後來Retina出現帶來的問題就是設備屏幕的物理尺寸沒有發生變化，可是分辨率變了，從320X480變爲640X960，這就使得若是根據分辨率來調整網站的開發方式是失敗的。

　　同時Retina出現的自己目的是說：將原來1個像素顯示的屏幕替換爲相應的4個，橫縱方向變成原來2倍，以此達到高清的效果。所以640X960物理像素的屏幕，網站仍然應該以320X480CSS像素的效果來展現，這樣CSS像素就成爲了相對單位：

　　物理像素：硬件屏幕設備實際的橫縱方向的點陣的基本單位，由硬件決定；

　　CSS像素：網站設計方面的基本單位，也稱：邏輯像素，WEB開發人員無需關心硬件級別適配，只需按照CSS像素方式的設計佈局便可。

　　由此新的名詞產生：設備像素比DPR（Device Pixel Ratio），指的是：CSS像素與物理像素的比，也能夠看作是：屏幕物理像素大小（640X960物理像素）與理想視口大小（320X480CSS像素）的比。DPR也能夠是小數，如1.5。

 

　　分辨率有兩個單位：

　　dpi：每英寸點數（Dots per inch），這裏的點數指的是像素的個數，針對於屏幕，這個值相對固定，爲72。以此來計算：分辨率 = 72 dpi * inch_size (按照物理像素數量算) 或者 72 / 144 / 216 dpi（按照物理像素密度算）；

　　dppx: 每像素點數（Dots per pixel），這個單位不被普遍支持，在DPR=2的屏幕上來計算：分辨率 = (72 dpi * DPR) * inch_size (按照物理像素數量算) 或者 1 / 2 / 3 dppx（按照物理像素密度算）；

　　按照物理像素密度算，分辨率與屏幕尺寸無關，這種說話經常使用在媒體查詢或者PS中； 

　　按照物理像素數量算，分辨率是與尺寸有關，這種說法以前用在DPR=1的PC電腦屏幕上，如：1600X1200。

 

　　DPR與分辨率的關係：

　　分辨率reslution與DPR描述的其實是一個東西，只是站在不一樣角度上看待的，因爲前者在移動端支持的不太好，因此DPR成爲事實上的標準，而被廣泛支持。之後的移動端開發都應該以DPR做爲參考來述說。

 

　　meta中的viewport：

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

　　device-width就是以物理像素計算的屏幕寬度，如：DPR爲2，理想視口爲320X480的屏幕，寬度爲640；

　　width=device-width: 將寬度設定爲物理像素的寬度，而後經過媒體查詢中的DPR=2來適應；

 

1. <<移動WEB手冊>>　

2. 移動端尺寸基礎知識