Viewport(視口)
概念
In web browsers, the viewport is the visible portion of the entire document.css
移動端瀏覽器在一個一般比屏幕更寬的虛擬」窗口「（視口）中渲染頁面，從而無需將全部頁面都壓縮進小屏幕裏（那樣會把不少沒有針對移動端進行優化的站點打亂）。用戶能夠經過平移和縮放來瀏覽頁面的不一樣區域。
大部分的移動端瀏覽器使用一個默認的視口寬度，這意味着視口將會用這個尺寸放大頁面，使全部的元素放進這個視口，從而渲染整個頁面。css3
各個瀏覽器的默認視口寬度
| Safariweb |
Opera瀏覽器 |
Android WebKitapp |
IE佈局 |
| 980px字體 |
850px優化 |
800pxspa |
974pxscala |
dp和px的換算公式
換算公式px = dp*(dpi/160)
等值的CSS裏面的px在手機屏幕上佔多大的位置，這不是固定的，還要取決於屏幕的DPI。由於手機會根據DPI，對頁面進行自動縮放來協調屏幕像素和尺寸之間的比例來顯示效果,基值是160dpi。意思是160dpi的設備裏（通常分辨率是320*480），1dp = 1px。咱們不關注dp是什麼，咱們關注的是px，當前設備的dp:px是多少，也就是頁面在分辨率高於或者低於320寬度分辨率的時候，對應的縮放比例（其實也就是個概念，就是webkit瀏覽器本身作的縮放，來適配不同的設備。咱們只要記住320，1dp=1px就好了，後面的往下看）。
什麼是dp
Density-independent pixels，一個基於計算機座標系統的物理測量單元，表明一個抽象的像素並用於基礎系統的app，如何換算成物理像素，以160PPI屏幕爲標準，則1dp=1px
DPI/PPI
Pixels per inch
如何計算
分辨率
一種在手機尺寸下能夠顯示的像素個數，好比，640*960分辨率意味着寬度是960個像素而高度是640個像素。
屏幕尺寸
手機屏幕對角線的長度，例如3.5英寸的手機。
計算
px = dp*(dpi/160)
330/160=2.0625
1dp等於2.0625個css px
viewport參數
| width | 視口寬度，各個瀏覽器的默認視口寬度不一樣。範圍：200-10,000.也可設成device-width |
| height | 視口高度，範圍：223-10,000 也可設成device-height |
| initial-scale | 頁面首次顯示時的縮放值，範圍由minimum-scale和maximum-scale決定 |
| minimum-scale | 頁面顯示時最小的縮放值，默認值：0.25，範圍：>0-10.0 |
| maximum-scale | 頁面顯示時最大的縮放值，默認值：5.0，範圍：>0-10.0 |
| user-scalable | 決定用戶是否能夠放大或者縮小頁面。值可取：yes，no。默認值：yes。設置成no，同時也能夠阻止頁面滾動，當輸入文本到文本框的時候。 |
手機設備尺寸一覽
適配方案
160dpi對應典型的分辨率是320*480
頁面加meta標籤
<meta name=」viewport」 content=」width=device-width,initial-scale=1.0,
minimum-scale=1,maximum-scale=1,user-scalable=no」>
設計稿複製一份，等比例縮放至320px寬度。320px*480是160dpi的典型分辨率。
由於viewport將頁面寬度設置成device-width，設備寬度各盡不一樣，可是基本能夠在320寬度的psd裏直接量尺寸，除非一些隨着設備寬窄會長短不一的文本字段用響應式佈局之外。
這時字體大小能夠設置成縮放後的字體大小，用px便可。
切下原稿上的icon，用css3 query，和backgound-size 縮放。
例如：分辨率寬480px的query：@media all and (-webkit-min-device-pixel-ratio:1.5)，background-size按比例設置。