移動端開發心得（2015.3.1更新）

一喵嗚發表於2015-02-27

1、 iOS裡fixed中有input或者textarea，使用者在裡面輸入文字，觸發鍵盤，fixed容器會居中顯示，而不是繼續懸浮

2、移動端click時間300ms延遲

解決辦法：zepto.js 或者百度touch.js 或者是fastclick.js

3、zepto的touch問題：swipe事件在小米1等低端手機不支援基本不用zepto

4、百度的touch.js通過touch.on進行繫結事件，但是點選會遇到點透問題，也就是父級觸發，子級觸發

解決辦法：下載最新版touch 地址：http://touch.code.baidu.com/ 通過最新API ev.originEvent.preventDefault();

之前有點透問題解決辦法，用到touchend或者是touchstar，可以是可以，但是有沒有考慮使用者在有滑屏的時候剛好手指剛碰到這個按鈕或者剛好在這個按鈕手指離開，也就會觸發這個按鈕事件，所以這種方法不太合理，往往都是點選才觸發的不是碰一下就讓他觸發。

5、select下拉框的高問題，手機顯示樣式不一樣，在QQ瀏覽器彈出的option列表的height跟select一樣高，在HTC手機自帶的瀏覽器，height設定較高的時候，不能用option去選中需要的引數值，還有option預設顯示的第一個有底色

6、在ipod、iphone4不支援通過tap觸發事件audio的JS，比如不能通過src的改變觸發聲音播放，用click去解決。

7、移動端audio在蘋果手機不支援音樂自動播放，蘋果有安全機制，需要使用者去手動觸發才能播放音樂，也就是現在很多一屏一屏滑動專案要加個音樂圖示不只是簡單的讓使用者去關掉音樂，投機做法是使用者手觸發到螢幕的時候就執行ID.play();的JS

8、表單就不說了，比如上傳按鈕設背景圖無效，都是通過opacity為0來模擬的

9、很多人用到fullPage.js來實現大圖滾動或者是一屏一屏的，但是在微信開發中用到這外掛如果不設定anchors來定義錨點，微信的公眾號釋出文章都帶有連結引數有#號，不加anchors ，就會出現滾到第二屏使用者退出繼續進去馬上跳到第二頁問題。

解決辦法：anchors: ['page1', 'page2', 'page3', 'page4'],

10、推薦使用swiper.js進行開發，比較好的中文API網站是：http://www.swiper.com.cn/ 能解決很多移動端問題，

11、蘋果系統在滾動長頁面的時候總是滾的很不爽，不利索，回彈效果，加一句程式碼：-webkit-overflow-scrolling : touch;

12、video預設控制器隱藏：video::-webkit-media-controls-enclosure { display:none!important;} ，還有就是video在移動端可以設定第一幀畫面，但是有些手機比如HTC預設是灰色背景的，解決辦法無非就是弄個圖蓋在上面，點選的時候圖消失觸發play，處女座才這麼幹。

13、PNG圖壓縮很頭疼，效果不好，你可以試試這個網站: https://tinypng.com/ 很多人都知道jpg可以調質量，但是不知道png也能這麼壓縮，效果最好的一個網站。現在出現一種質量更低的webP格式圖，谷歌開發的，安卓手機測試都可以，蘋果手機不行。不採用，可以瞭解一下。可檢視智圖： http://zhitu.tencent.com/

14、能用字型圖示就用字型圖示，IE6都能相容，移動端怕啥？ http://www.iconfont.cn/

15、CSS3動畫效果可以參考下Animate.css 寫的很不錯： http://daneden.github.io/animate.css/

有些低端手機比較炫的效果直接有前有後，沒有中間效果，手機卡出翔，不支援。

16、瞭解viewport.js的人，如果遇到一些手機縮放小變大，jquery就要放到viewport引用前面，還有就是meta標籤，需要注意width=device-width ，github地址：https://github.com/anatoo/viewport.js 用px來切圖移動端，PC端怎麼切你移動端也跟著切，但是一般少用，viewport會出現些問題，專案比較急才用

17、移動端用rem吧，別再用老掉牙的em了；

18、蘋果手機都知道手機號碼會消失不見，加句程式碼吧：<metacontent="telephone=no"name="format-detection"/>

忽略郵箱識別，加句程式碼吧：<meta content="email=no" name="format-detection" />

19、好累，先睡覺改天再補充.....

以下移動端內容來自CSDN博友牙膏整理：《做手機web半年遇到的問題及解決方法》

首先，先說的是我每個專案都會用到的一個模板頁，這個我遇到大大小小的坑之後定義好的一個html檔案

[html] view
 plaincopy

<!DOCTYPE html>  

<html>  

<head>  

    <meta charset="utf-8" />  

    <!-- 寬度設定為裝置實際寬度，初始化倍數為1，最小倍數為1，最大倍數為1，使用者縮放為否 -->  

    <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />  

    <!-- 刪除預設的蘋果工具欄和選單欄 -->  

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

    <!-- 蘋果手機頂部為黑色 -->  

    <meta name="apple-mobile-web-status-bar-style" content="block" />  

    <!-- 遮蔽瀏覽器自動識別數字為電話號碼 -->  

    <meta name="fromat-detecition" content="telephone=no" />  

    <!-- base.css是所有專案都會用到的底層樣式 -->  

    <link rel="stylesheet" type="text/css" href="css/base.css" />  

    <!-- content.css是每個專案所有頁面都會用到的公共樣式 -->  

    <link rel="stylesheet" type="text/css" href="css/content.css" />  

    <!-- main.css為每個頁面或是模組用到的一個樣式檔案-->  

    <link rel="stylesheet" type="text/css" href="css/main.css" />  

    <title></title>  

    <script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>  

    <!-- base.js為所有專案都會用到的js檔案 -->  

    <script type="text/javascript" src="lib/base.js"></script>  

</head>  

<body>  

</body>  

</html>

上面的meta可以幫我避免了好都問題

遇到的問題：

1.蘋果手機上面，input控制元件會有預設的樣式

解決

[html] view
 plaincopy

/*去掉蘋果手機端web按鈕預設樣式，解決按鈕預設圓角問題*/  

input[type="button"]{-webkit-appearance:none; /*去除input預設樣式*//*border-radius: 0px;*/}  

2.在點選a標籤的時候，安卓的手機會有藍色底，蘋果的機子會有灰色底

解決

[html] view
 plaincopy

/*遮蔽點選元素出現底色*/  

a  

{  

    -webkit-tap-highlight-color:rgba(255,255,255,0);  

}

3.禁止頁面上的文字選中功能

解決

[html] view
 plaincopy

-webkit-user-select:none;  

4.左圖，右文字的結構實現

這種結構

（1）.第一次做的時候，左右兩塊都是用百分百，這樣在不同的螢幕因為右邊字型的原因會有佈局混亂的情況，然後就用媒體查詢寫多了兩個樣式檔案，不過還有一個就是在平板上面，同樣的百分百，左邊的圖片太大，導致右邊的文字之間的間距要很大才可以對齊，效果很不好

（2）.第二次做的時候，就想到了一個方法，利用float脫離文件流的特性，給圖片設定一個maxwidth，然在device-width*圖片百分百=maxwidth時，將文字所在的div的float設定為none；且設定margin-left為圖片的寬度+之間的間距。

（3）.第三次做的時候，因為看了其他的一些輕APP在橫屏的時候，圖片大小依然一致，所以把圖片寬度定死，給個max-width和min-width，用彈性佈局 flex-box，這回就很簡單的高度這個佈局問題

5.在微信，UC開啟頁面會有快取問題，導致有時候改動的小效果看不到

解決：這裡試過用cache來不讓其快取，不過用完之後反而令他們不載入檔案（至今還沒成功使用過cache），最後在載入傳送請求的時候檔案後面新增多個隨機數，這樣才解決測試是快取問題

6.在做手機頁面的時候，很多時候會用到z-index這個屬性，如果用到這個屬性的時候再對對應元素設定的話，會比較容易亂。

解決：我設定了

top0{z-index:9999};

top1{z-index:8888};

top2{z-index:7777};

top3{z-index:6666};

top4{z-index:5555};

這樣，在每個頁面中，對應得貼上上面樣式就行了。

7.還有就是多列布局column，彈性佈局flex-box

在不知道這兩種佈局的時候，以下佈局對來來說是比較麻煩的,特別是三列的，並且中間那個還有左右邊框，定義百分百的時候比較麻煩。

在知道多列布局column，彈性佈局flex-box後上面的問題很好解決，但是要記得column的子元素要給高度，不然有可能會佈局混亂

還有個問題就是設定column-count為3的時候，在7個子元素的時候會是這樣的

豎著排列，不符合正常的一個閱讀習慣，最後還是改成了float來佈局

8.em跟rem的區別

em是相對於父層

rem是相對於根元素

所以說，如果html{font-size:62.5%};的時候，

如果是在parent元素設定1.5em,child設定1.0em就等同於html的1.5em了

在parent元素設定1.5em的情況下，child用rem作為font-size的單位的話，那麼就要設定1.5rem才等同上面的效果

9.backgrond-size,這個屬性很好用

用法有 a.百分百 b.直接給寬高 c.cover d.contain四種用法，按需要選擇使用

10.在iphone中，在手機改為橫屏模式的時候，字型會預設變大

解決:

/*禁止IOS橫屏的時候字型變大*/
-webkit-text-size-adjust: none;

11.在用到<div><img src="" /></div>這個結構的時候，就是用塊級元素包住img的時候，會出現div高度大於img的情況，就是有點高度不知道怎麼來的解決:img{display:block;};

12.在用到media的時候，如果在<meta>有設定width=device-widht的話，media中在設定max-width min-width，這裡不能用max-device-width 跟 min-device-height，不然會沒效果

13.目前手機web還無法禁用手機橫屏的情況下，如果你頁面佈局有問題的話，在橫屏的時候會出現佈局亂的情況

解決

在橫屏的時候彈出個層把他改正

例如

[html] view
 plaincopy

/*@media screen and (orientation:landscape)  

{  

    .orientation-phone  

    {  

        display: block;  

    }  

}*/  

/*頁面遮蓋層*/

14.在彈出整屏div的時候，如果頁面整體大於一螢幕，這時候還會出現頁面可以滾動的情況頁面旁邊是出現滾動條的，而且是可以拖動的

解決:在body設定高度100%，且overflow-hidden;在彈出消失的時候才去掉overflow-hidden;

15.在做一個手機web專案的時候，要先總結下頁面所以的字型大小，然後定義好幾種常用font-size，防止後期混亂

16.在看設計稿的時候，要注意比例的縮放，因為UI做的時候用的尺寸是用640*1136（至少我這邊是這樣），然後再做手機web的時候，我們再mate那裡content設定width=device-width，所以要根據實際的頁面效果來定義頁面常用的font-size大小以及其他。不能按UI給出的字型大小來設定font-size。

17.在class反面，少用繼承，多用組合，這樣可以加快開發效率，可以自己定義一個底層樣式base.css（常用樣式且所以專案都可以共用）

18.可能做手機web的都去學校手機web開發框架，例如我就是學了jquery mobile，這個框架很強大，但是不的不說，就是在UI樣式方面比較麻煩，要不斷的去覆蓋樣式，如果你的web是UI是有自己特色的話，這個時候用jquery mobile就比較費時間（至少我是這樣）。所以說在開發的時候，覺得哪個方法快就用哪個，不要為了用框架而且用框架。

************************************************************分割線 ************************************************************************************

以下規範建議，均是Alloyteam在日常開發過程中總結提煉出的經驗，規範具備較好的專案實踐，強烈推薦使用

字型設定

使用無襯線字型

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

iOS 4.0+ 使用英文字型 Helvetica Neue，之前的iOS版本降級使用 Helvetica。中文字型設定為華文黑體STHeiTi。需補充說明，華文黑體並不存在iOS的字型庫中(http://support.apple.com/kb/HT5878)，但系統會自動將華文黑體 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 系統也一致選擇預設的無襯線字型

基礎互動

設定全域性的CSS樣式，避免圖中的長按彈出選單與選中文字的行為

a, img {
    -webkit-touch-callout: none; /* 禁止長按連結與圖片彈出選單 */
}
html, body {
    -webkit-user-select: none;   /* 禁止選中文字（如無文字選中需求，此為必選項） */
    user-select: none;
}

移動效能

要考慮`Android`低端機與`2G`網路場景下效能注意！

釋出前必要檢查項

所有圖片必須有進行過壓縮
考慮適度的有失真壓縮，如轉化為80%質量的jpg圖片
考慮把大圖切成多張小圖，常見在banner圖過大的場景

載入效能優化, 達到開啟足夠快

資料離線化，考慮將資料快取在 localStorage
初始請求資源數 < 4 注意！
圖片使用CSS Sprites 或 DataURI
外鏈 CSS 中避免 @import 引入
考慮內嵌小型的靜態資源內容
初始請求資源gzip後總體積 < 50kb
靜態資源(HTML/CSS/JS/Image)是否優化壓縮？
避免打包大型類庫
確保接入層已開啟Gzip壓縮（考慮提升Gzip級別，使用CPU開銷換取載入時間）注意！
儘量使用CSS3代替圖片
初始首屏之外的靜態資源（JS/CSS）延遲載入注意！
初始首屏之外的圖片資源按需載入（判斷可視區域）注意！
單頁面應用(SPA)考慮延遲載入非首屏業務模組
開啟Keep-Alive鏈路複用

執行效能優化, 達到操作足夠流暢

避免 iOS 300+ms 點選延時問題注意！
快取 DOM 選擇與計算
避免觸發頁面重繪的操作
Debounce連續觸發的事件(scroll / resize / touchmove等)，避免高頻繁觸發執行注意！
儘可能使用事件代理，避免批量繫結事件
使用CSS3動畫代替JS動畫
避免在低端機上使用大量CSS3漸變陰影效果，可考慮降級效果來提升流暢度
HTML結構層級保持足夠簡單
盡能少的使用CSS高階選擇器與通配選擇器
Keep it simple

線上效能檢測評定工具使用指南

訪問 Google PageSpeed 線上評定網站
在位址列輸入目標URL地址，點選分析按鈕開始檢測
按 PageSpeed 分析出的建議進行優化，優先解決紅色類別的問題

移動端開發心得（2015.3.1更新）

字型設定

基礎互動

移動效能

要考慮Android低端機與2G網路場景下效能 注意！

相關文章

要考慮`Android`低端機與`2G`網路場景下效能注意！