viewport：
字面意思為檢視視窗，在移動
web開發中使用。表示將裝置瀏覽器寬度虛擬成乙個特定的值（或計算得出），這樣利於移動
web站點跨裝置顯示效果基本一致。
基本寫法：
測試獲取
viewport
的width：
document.documentelement.clientwidth
1、在iphone
上是讀取
device-width
的值，並自動計算出
target-densitydpi
去適配，在
iphone4
上讀取的值為
320 。
最終的計算公式為： 當
initial-scale=1時：
viewportwidth=width ；
當initial-scale !=1時：
viewportwidth=width > 320 / initial-scale ? width : 320 / initial-scale ;
viewportwidth
不超過1280
，大於取
1280 。
2、在android
上，讀取的是
target-densitydpi
。在不設定的情況下，預設選擇的是
medium-dpi(160)
。以下討論均在中螢幕大小的手機上範圍內：
dpi的分級與其對應的代表解析度：
low-dpi:240*320
（基本淘汰，暫不討論）
medium-dpi:320*480
high-dpi:480*800
super high-dpi:640*960
其對應的
dpi為
120、
160、
240、
320 。
實驗一：對
480*800
設定dpi
為medium-dpi
，其viewport
為320
；設為high-dpi
，其viewport
為480
；設為device-dpi
，其viewport
為480；
實驗二：對
540*800
設定medium-dpi
，viewport
為360
；設為high-dpi
，其viewport
為540
；設為device-dpi
，其viewport
為540
；設為low-dpi
，其viewport
為270；
總結：從上面兩個實驗可得出：
當裝置為
high-dpi
裝置時，設定為中解析度的
viewportwidth
為（2/3
）*device-width
；設定為
low-dpi
時，為（
1/2）
*device-width
。這個比例和其
dpi的比例是一致的，
2/3=160/240
和1/2=120/240；
推測dpi
的值與viewportwidth
存在一元關係。
①假設我要做乙個
android high-dpi
裝置應用，虛擬的
viewportwidth
定死為320px。
設device-width=x
，（2/3）*x
為該裝置設為
medium-dpi
時viewportwidth
的值，x/240
表示乙個
dpi值代表多少個px。
target-densitydpi=160 - /(x/240);
簡化一下：
target-densitydpi=320*240/x；
實驗三：在
540手機上設定
target-densitydpi=142
，其viewport
為320 。
根據以上公式可以計算出
target-densitydpi=142.222222
，與上面測試資料一致。
②假設我要做乙個
android super-high-dpi
裝置應用，虛擬的
viewportwidth
定死為320px。
target-densitydpi=320*320/x；
此公式未進行試用期驗證。
③假設我要做乙個
android medium-dpi
裝置應用，虛擬的
viewportwidth
定死為320px。
target-densitydpi=160 - /(x/160);
target-densitydpi=320*160/x
實驗成功
④假設我要做乙個
android low-dpi
裝置應用，虛擬的
viewportwidth
定死為320px。
target-densitydpi=160 - /(x/120);
target-densitydpi=320*120/x
此公式未進行試用期驗證。
特例：htca510e
：在width
設有具體值時，會讀取
width
，忽略dpi。
聯想k1 pad
不讀取dpi
，只讀取
width
，而且當
width
小於等於
320的時候忽視，直接取
device-width。
3、htc input
縮放問題。當
viewport
的值大於
device-width
時，會出現
input
獲取焦點放大。所以在設計中選擇基於
320解析度（
240裝置淘汰不討論），出圖基於
640，
0.5縮放保證清晰度。
總結，在開發時最好基於320
寬進行開發，基於
640做，在放置時可以用
background-size
或zoom
縮放一倍，在高畫質晰屏上就不會模糊。在載入頁面時通過讀取裝置的
width
去計算dpi
然後動態生成
meta
標記，可以很好解決手機的解析度適配問題。但是在
android pad
端上不適用，原因有二，一、
pad對
width
是計算還是讀取比較混亂，有些像
ios，有些讀
dpi，還有的兩個都讀，然後分段比較。二、
pad的高中低
dpi分檔和手機不一樣，沒有統一標準
Android解析度常識 多解析度適配
螢幕大小 以螢幕對角線的物理長度來衡量螢幕的大小 解析度 螢幕中所有物理畫素點數。如1920x1080，就表示寬方向有1920個畫素，高方向有1080個畫素，整個螢幕有2073600個畫素。螢幕密度 dpi dots per inch 即畫素密度，每英吋面積上存在多少個畫素。160dpi表示單位面積...
螢幕解析度適配
螢幕解析度 1024x600 density 1 160 資料夾 values mdpi 1024x600 螢幕解析度 1024x600 density 1.5 240 資料夾 values hdpi 683x400 由1024 1.5 600 1.5得到，需要四捨五入。螢幕解析度 800x480 ...
React native 解析度適配
react native中使用的尺寸單位是pt，是乙個絕對長度，而設計師使用的是px,這兩種尺寸如何換算呢？官方提供了pixelratio import from react native const pt2px pt pixelratio.getpixelsizeforlayoutsize pt ...