移動端webapp開發基礎

標籤：android   style   http   color   使用   os   io   strong   

（1） CSS pixels與device pixels

CSS pixels： 瀏覽器使用的抽象單位， 主要用來在網頁上繪製內容。

device pixels： 顯示螢幕的的最小物理單位，每個dp包含自己的顏色、亮度。

等值的 CSS pixels在手機螢幕上佔多大的位置，這不是固定的，這取決於很多屬性。經過分析和總結，我們可以得出這麼一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels  。

（2） PPI/DPI

PPI，有時也叫DPI，所表示的是每英寸所擁有的像素（pixel）數目，數值越高，即代表顯示屏能夠以越高的密度顯示映像。（註：這裡的像素，指的是device pixels。）搞清楚了PPI是什麼意思，我們就能很容易理解PPI的計算方式了，我們需要首先算出手機螢幕的對角線等效像素，然後處以對角線（我們平常所說的手機螢幕尺寸就是說的手機螢幕對角線的長度），就可以得到PPI了。準確的計算公示大家可以參照。比較有意思的是，根據公式計算出來的iPhone 4的PPI為330，要比蘋果官方公布的326要高一點點。

（4） viewport的使用

控制顯示地區各種屬性：

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

viewport總共有5個屬性，分別如下：

content=“

height = ［ pixel_value |device-height］ ，

width = ［ pixel_value |device-width ］ ，

initial-scale = float_value ， minimum-scale = float_value ， maximum-scale = float_value ，

user-scalable =［yes | no］ ，

target- densitydpi = ［ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi］ ” />

• width                      - viewport的寬度

• height                     – viewport的高度

• initial-scale          - 初始的縮放比例

• minimum-scale  - 允許使用者縮放到的最小比例

• maximum-scale – 允許使用者縮放到的最大比例

• user-scalable       – 使用者是否可以手動縮放

        在這些屬性裡面，我們重點關注target-densitydpi，這個屬性可以改變裝置的預設縮放。medium-dpi是target-densitydpi的預設值，如果我們顯式定義target-densitydpi=device-dpi，那麼裝置就會按照真實的dpi來渲染頁面。打個比方說，一張320*480的圖片，放在iphone4裡面，預設是佔滿螢幕的，但如果定義了target-densitydpi=device-dpi，那麼圖片只佔螢幕的四分之一（二分之一的平方），因為iphone4的解析度是640*960。

IOS中Safari允許全屏瀏覽：

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari頂端狀態條樣式：

<meta content="black" name="apple-mobile-web-app-status-bar-style">

忽略將數字變為電話號碼：

<meta content="telephone=no" name="format-detection">

一般情況下，IOS和Android系統都會預設某長度內的數字為電話號碼，即使不加也是會預設顯示為電話的，so，取消這個很有必要！

IOS中Safari設定儲存到案頭表徵圖：

這是IOS中Safari特有的meta，是在你儲存某個頁面到案頭的時候使用這張圖作為案頭表徵圖，so，尺寸和iphone上的一致，是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

二、解決方案

（1） 簡單粗暴

        如果我們按照320px寬的設計稿去製作頁面，並且不做任何的設定，頁面會預設自動縮放到跟手機螢幕相等的寬度（這是由於 medium-dpi是target-densitydpi的預設值，和不同密度對應不同縮放比例所決定的，這一切都是行動裝置自動完成的 ）。所以這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對於高密度和超高密度的手機裝置，頁面（特別是圖片）會失真，而且密度越多，失真越厲害。

（2） 極致完美

        在這種方案中，我們採用 target-densitydpi=device-dpi，這樣一來，手機裝置就會按照真實的像素數目來渲染，用專業的話來說，就是1 CSS pixels = 1 device pixels。比如對於 640*960的 iphone，我們就可以做出 640*960的頁面，在iphone上顯示也不會有捲軸。當然，對於其他裝置，也需製作不同尺寸的頁面，所以這種方案往往是使用媒體查詢來做成響應式的頁面。這種方案可以在特定的解析度下完美呈現，但是隨著要相容的不同解析度越多，成本就越高，因為需要為每一種解析度書寫單獨的代碼。

（3） 適中響應

        針對安卓裝置絕大多數是高密度，部分是中密度的特點，我們可以採用一個折中的方案：我們對480px寬的設計稿進行還原，但是頁面製做卻成320px寬（使用background-size來對圖片進行縮小），然後，讓頁面自動按照比例縮放。這樣一來，低密度的手機有捲軸（這種手機基本上已經沒有人在用了），中密度的手機會浪費一點點流量，高密度的手機完美呈現，超高密度的手機輕微失真（超高密度的安卓手機很少）。這種方案的優點非常明顯：只需要一套設計稿，一套代碼（這裡只是討論安卓手機的情況）。