開發(fā)者分享：移動端開發(fā)踩坑記
不知不覺，做移動端開發(fā)也有半年的時間了。從剛開始接觸移動端開發(fā)，到現(xiàn)在的細節(jié)完善。期間也走了很多坑！為什么會走這么多坑呢？
可能身邊做前端開發(fā)的朋友比較少，想找個人一起研究技術的都沒。也加過一些前端群，大多數(shù)些扯淡聊天的群。沒辦法，只得自己去苦逼的研究！
下面一起來分享下，我做移動端開發(fā)半年來的一些經驗，以及需要注意的一些東西吧！
一、關于單位的使用
相信只要做過移動端開發(fā)的人，或者剛入門的新手朋友們，最糾結的問題是在于“字體”單位的選擇！為什么會這樣說呢?
可能在傳統(tǒng)的PC端來說，1px=1px的比例。而在移動端卻不是這樣，1px = ?。 因為出現(xiàn)了一個像素密度這樣個東西，就不能在移動端使用“PX”這個單位。可能在你的大屏手機是1px等于1點幾個像素，可能在小屏手機卻剛好。就好比網頁的兼容性一樣，瀏覽器的內核不同，解析當然會有所不同！
正好，CSS3又給你出現(xiàn)了一個新的單位“rem”。如果有對rem還有不怎么了解的朋友，可以看看這篇文章：《Web app變革之rem》。
當然出現(xiàn)了這樣的問題，首先我們就會去問問神奇的“百度”。不是網上流傳這樣一個段子么:“有事找度娘，無事上度娘！”，好吧，我又邪惡了！回歸正題，大多數(shù)網友給出的答案是:“給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的比例來做，就是寬度減少一半。可能多數(shù)人跟我之前是一樣，字體用單位“rem”。其它照樣使用px這個單位。好吧！最近又被嚴格的UI設計師，找出問題來了，你怎么這里跟我效果圖對不上呀！....
好吧！原來想偷工減料的就這樣寫的，沒辦法，既然被嚴格的查起來了，又得去找解決方案！(可能之前也沒太在意這些細節(jié)，一直就這樣拖著)
暫時找了個合適的解決方案，這樣既解決了字體單位的問題，又兼容單位像素的問題，只是換算麻煩點！
比如:我們要設置一個寬度為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;
- }
- }
可能還有更好的解決方案,暫時沒找到更好的方案...
三、細節(jié)處理
可能處理細節(jié)就是在解決兼容性的問題吧！還好手機端沒有蹦出個IE來，基本都是webkit內核和IOS自帶的瀏覽器。
1、禁止自動識別電話和android自動識別郵箱
- <br>
2、使用無襯線字體
|
|
|
iOS 4.0+ 使用英文字體 Helvetica Neue，之前的iOS版本降級使用 Helvetica。中文字體設置為華文黑體STHeiTi。需補充說明，華文黑體并不存在iOS的字體庫中，但系統(tǒng)會自動將華文黑體 STHeiTi 兼容***系統(tǒng)默認中文字體黑體-簡或黑體-繁
- 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 系統(tǒng)也一致選擇默認的無襯線字體
3、禁止選擇文本
- html, body {
- -webkit-user-select: none; /* 禁止選中文本(如無文本選中需求,此為必選項) */
- user-select: none;
- }
4、禁止長按鏈接與圖片彈出菜單
- a, img {
- -webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */
- }
5、去除A連接input標簽，點擊出現(xiàn)自帶的陰影樣式
- a,input{
- -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除自帶陰影的樣式*/
- }
6、屏蔽陰影:
- -webkit-appearance:none;
可以同時屏蔽輸入框怪異的內陰影，解決iOS下無法修改按鈕樣式，測試還發(fā)現(xiàn)一個小問題就是，加了上面的屬性后，iOS下默認還是帶有圓角的，不過可以使用 border-radius屬性修改。
7、單擊延遲
click 事件因為要等待雙擊確認，會有 300ms 的延遲，體驗并不是很好。
開發(fā)者大多數(shù)會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。
8、手機拍照和上傳圖片
HTML5模板代碼：點擊下載。
再次覺得一個人苦逼的研究太累了，沒有方向，可能會浪費大量的時間在做研究和測試上，但是也有一些樂趣在里面！對于學習和成長不失為一個很好的辦法。
