移動篇 視口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：DPI（Dots per inch），這裡的點數指的是像素的個數，針對於螢幕，這個值相對固定，如：96。以此來計算：解析度 = 96dpi * inch_size；

　　dppx: 每像素點數（Dots per pixel），這個單位不被廣泛支援，在DPR=2的螢幕上來計算：解析度 = (96dpi * DPR) * inch_size；

 

　　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來適應；

　　

 

移動篇 視口viewport