移動webAPP前端開發技巧匯總2

標籤：

一、關於單位的使用

可能在傳統的PC端來說，1px=1px的比例。而在移動端卻不是這樣，1px = ?。 因為出現了一個像素密度這樣個東西，就不能在移動端使用“PX”這個單位。可能在你的大屏手機是1px等於1點幾個像素，可能在小屏手機卻剛好。就好比網頁的相容性一樣，瀏覽器的核心不同，解析當然會有所不同！

正好，CSS3又給你出現了一個新的單位“rem”。當然出現了這樣的問題，首先我們就會去問問神奇的“百度”。大多數網友給出的答案是:“給html根項目的字型大小設定font-size:62.5%，再來使用rem這個單位就能很好的解決這個問題！”

這樣設定後:就會得到一個兌換比例值:1rem = 10px; 如果我們要給一個"h1"標籤設定字型大小為20px的時候。我們就直接設定為rem就好了！

代碼如下:

html{font-size:62.5%;}h1{fon-size:2rem} ==>h1{fon-size:20px}

二、布局上

相信布局不用我多說什麼了，就按照正常的網頁布局來寫，一般設計師給的是640*960.我們就按照320的比例來做，就是寬度減少一半。可能多數人跟我之前是一樣，字型用單位“rem”。其它照樣使用px這個單位。好吧！最近又被嚴格的UI設計師，找出問題來了，你怎麼這裡跟我對不上呀！....

好吧！原來想偷工減料的就這樣寫的，沒辦法，既然被嚴格的查起來了，又得去找解決方案！(可能之前也沒太在意這些細節，一直就這樣拖著)

暫時找了個合適的解決方案，這樣既解決了字型單位的問題，又相容單位像素的問題，只是換算麻煩點！

比如:我們要設定一個寬度為60px的盒子.換算成rem單位就是:60/2/20 = 1.5rem; 前提是我們需要在頭部添加以下代碼:

PS:實際像素為60px，在手機端就是30px，在轉化成rem單位就在除以20。

html {    font-size : 20px;}@media only screen and (min-width: 401px){    html {        font-size: 25px !important;    }}@media only screen and (min-width: 428px){    html {        font-size: 26.75px !important;    }}@media only screen and (min-width: 481px){    html {        font-size: 30px !important;    }}@media only screen and (min-width: 569px){    html {        font-size: 35px !important;    }}@media only screen and (min-width: 641px){    html {        font-size: 40px !important;    }}

可能還有更好的解決方案,暫時沒找到更好的方案...

三、細節處理

可能處理細節就是在解決相容性的問題吧！還好手機端沒有蹦出個IE來，基本都是webkit核心和IOS內建的瀏覽器。

1、禁止自動識別電話和android自動識別郵箱

2、使用無襯線字型

body {       font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;    }

OS 4.0+ 使用英文字型 Helvetica Neue，之前的iOS版本降級使用 Helvetica。中文字型設定為華文黑體STHeiTi。需補充說明，華文黑體並不存在iOS的字型庫中，但系統會自動將華文黑體 STHeiTi 相容命中系統預設中文字型黑體-簡或黑體-繁

Heiti SC Light 黑體-簡 細體 (iOS 7後廢棄)Heiti SC Medium 黑體-簡 中黑Heiti TC Light 黑體-繁 細體Heiti TC Medium 黑體-繁 中黑

原生Android下中文字型與英文字型都選擇預設的無襯線字型

4.0 之前版本英文字型原生 Android 使用的是 Droid Sans，中文字型原生 Android 會命中 Droid Sans Fallback

4.0 之後中英文字型都會使用原生 Android 新的 Roboto 字型

其他第三方 Android 系統也一致選擇預設的無襯線字型

3、禁止選擇文本

html, body {      -webkit-user-select: none;   /* 禁止選中文本(如無文本選中需求,此為必選項) */      user-select: none;}

4、禁止長按連結與圖片快顯功能表

a, img {       -webkit-touch-callout: none; /* 禁止長按連結與圖片快顯功能表 */    }

5、去除A串連input標籤，點擊出現內建的陰影樣式

a,input{    -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除內建陰影的樣式*/    }

6、屏蔽陰影:

-webkit-appearance:none;

可以同時屏蔽輸入框怪異的內陰影，解決iOS下無法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下預設還是帶有圓角的，不過可以使用 border-radius屬性修改。

7、單擊延遲

click 事件因為要等待雙擊確認，會有 300ms 的延遲，體驗並不是很好。

開發人員大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。

移動webAPP前端開發技巧匯總2