移動開發規範概述

字體設置

使用無襯線字體

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

基礎交互

設置全局的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 分析出的建議進行優化，優先解決紅色類別的問題

常見Hack(不斷更新...)

1.修改和去除移動端點擊事件出現的背景框

-webkit-tap-highlight-color: rgba(240,240,240,0.7);
//透明色爲：rgba(0,0,0,0)

2.選中中文字的背景色

::selection         { background:#FFF; color:#333; }
::-moz-selection    { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}

3.如何禁止手機瀏覽器、微信瀏覽器的上下滑動露出黑色塊問題

<script type='text/javascript'>
document.querySelector('body').addEventListener('touchstart', function (ev) {
    event.preventDefault();
});
</script>

4.淘寶無線Web概述地址
5.移動端viewport

width=750,  target-densitydpi=high-dpi，minimum-scale=1.0, maximum-scale=2.0, user-scalable=0
//固定寬度，省事
width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui
//百分比

6.動態設置頁面html，Font-size的值，方便使用rem

//爲頁面html動態設置font-size值
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = clientWidth / 7.5 + 'px';
        //等價於clientWidth / 750 * 100 + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);//resize
    doc.addEventListener('DOMContentLoaded', recalc, false);//reload
})(document, window);

7.定義瀏覽器點擊行爲：

<a href="tel:020-10086">打電話給:020-10086</a>
<a href="sms:10086">發短信給: 10086</a>
<a href="mailto:me@22278.club">發送郵件: me@22278.club</a>

<meta name="format-detection" content="telephone=no"/>
content 裏面的參數：telephone=no 是禁止瀏覽器自動識別手機號碼，email=no 是禁止瀏覽器自動識別Email。

8.自定義蘋果圖標
在網站文件根目錄放一個 apple-touch-icon.png 文件，蘋果設備保存網站爲書籤或桌面快捷方式時，就會使用這個文件做爲圖標，文件尺寸建議爲：180px × 180px。

9.css

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用無襯線字體*/
}

a, img {
    -webkit-touch-callout: none; /*禁止長按連接與圖片彈出菜單*/
}

html, body {
    -webkit-user-select: none; /*禁止選中文本*/
    user-select: none;
}

button,input,optgroup,select,textarea {
    -webkit-appearance:none; /*去掉webkit默認的表單樣式*/
}

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
}

input::-webkit-input-placeholder {
    color:#ccc; /*修改webkit中input的planceholder樣式*/
}

input:focus::-webkit-input-placeholder {
    color:#f00; /*修改webkit中focus狀態下input的planceholder樣式*/
}

body {
    -webkit-text-size-adjust: 100%!important; /*禁止IOS調整字體大小*/
}

input::-webkit-input-speech-button {
    display: none; /*隱藏Android的語音輸入按鈕*/
}

10.media query

@media screen and (max-width: 600px) {
    //你的樣式放在這裏....
}
@media screen and (min-width: 900px) {
    //你的樣式放在這裏...
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    //你的樣式放在這裏...
}

/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
    //你的樣式放在這裏...
}
max-device-width指的是設備整個渲染區寬度（設備的實際寬度）

// Landscape phones and down
@media (max-width: 480px) { ... }
 
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
 
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
 
// Large desktop
@media (min-width: 1200px) { .. }