一、關於單位的使用
可能在傳統的pc端來說，1px=1px的比例。而在移動端卻不是這樣，1px = ?。 因為出現了乙個畫素密度這樣個東西，就不能在移動端使用「px」這個單位。可能在你的大屏手機是1px等於1點幾個畫素，可能在小屏手機卻剛好。就好比網頁的相容性一樣，瀏覽器的核心不同，解析當然會有所不同！
這樣設定後:就會得到乙個兌換比例值:1rem = 10px; 如果我們要給乙個"h1"標籤設定字型大小為20px的時候。我們就直接設定為rem就好了！
**如下:
htmlh1==>h1
二、布局上
相信布局不用我多說什麼了，就按照正常的網頁布局來寫，一般設計師給的效果圖是640*960.我們就按照320的比例來做，就是寬度減少一半。可能多數人跟我之前是一樣，字型用單位「rem」。其它照樣使用px這個單位。好吧！最近又被嚴格的ui設計師，找出問題來了，你怎麼這裡跟我效果圖對不上呀！....
好吧！原來想偷工減料的就這樣寫的，沒辦法，既然被嚴格的查起來了，又得去找解決方案！(可能之前也沒太在意這些細節，一直就這樣拖著)
暫時找了個合適的解決方案，這樣既解決了字型單位的問題，又相容單位畫素的問題，只是換算麻煩點！
比如:我們要設定乙個寬度為60px的盒子.換算成rem單位就是:60/2/20 = 1.5rem; 前提是我們需要在頭部新增以下**:
ps:效果圖實際畫素為60px，在手機端就是30px，在轉化成rem單位就在除以20。
html @media only screen and (min-width: 401px)}@media only screen and (min-width: 428px)}
@media only screen and (min-width: 481px)}
@media only screen and (min-width: 569px)}
@media only screen and (min-width: 641px)}
可能還有更好的解決方案,暫時沒找到更好的方案...
三、細節處理
可能處理細節就是在解決相容性的問題吧！還好手機端沒有蹦出個ie來，基本都是webkit核心和ios自帶的瀏覽器。
1、禁止自動識別**和android自動識別郵箱
2、使用無襯線字型
body
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
a, img
5、去除a連線input標籤，點選出現自帶的陰影樣式
a,input
6、遮蔽陰影:
可以同時遮蔽輸入框怪異的內陰影，解決ios下無法修改按鈕樣式，測試還發現乙個小問題就是，加了上面的屬性後，ios下預設還是帶有圓角的，不過可以使用 border-radius屬性修改。
7、單擊延遲
click 事件因為要等待雙擊確認，會有 300ms 的延遲，體驗並不是很好。
開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。
webapp 移動端開發
h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 將 新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式 移動端如何定義字型font family body中文字型使用系統預設即可，英文用helvetic...
移動前端開發小技巧
1.有時候，厚厚的border也許有用，例如區域滾動，卻要在頂部或底部留出一塊死邊。2.切記，告別px吧，em是不錯的選擇，pc端也適用。3.empty選擇器選擇裡面沒有內容的標籤。4.如果你在文件中使用了 overflow hidden auto 的話，新增下面的 css 可以使滾動更加流暢。we...
移動端webApp之大前端 一
由於移動端的手機螢幕跟pc端不同，解析度也是五花八門，所以對於移動端前端頁面布局就是很大的挑戰。不過我們既然知道了移動端跟pc端不同 就可以有針對性的進行開發，畢竟移動端的瀏覽器不牽扯到太多pc端似的各種坑爹的相容！viewport 不得不說的是viewport，這是移動端開發必備的乙個meta標籤...