摘要：自定義蘋果圖標(biāo)在網(wǎng)站文件根目錄放一個文件，蘋果設(shè)備保存網(wǎng)站為書簽或桌面快捷方式時，就會使用這個文件作為圖標(biāo)，文件尺寸建議為。

使用無襯線字體

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

設(shè)置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行為

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

要考慮Android低端機與2G網(wǎng)絡(luò)場景下性能 注意！

發(fā)布前必要檢查項

所有圖片必須有進(jìn)行過壓縮

考慮適度的有損壓縮，如轉(zhuǎn)化為80%質(zhì)量的jpg圖片

考慮把大圖切成多張小圖，常見在banner圖過大的場景

加載性能優(yōu)化, 達(dá)到打開足夠快

數(shù)據(jù)離線化，考慮將數(shù)據(jù)緩存在 localStorage

初始請求資源數(shù) < 4 注意！

圖片使用CSS Sprites 或 DataURI

外鏈 CSS 中避免 @import 引入

考慮內(nèi)嵌小型的靜態(tài)資源內(nèi)容

初始請求資源gzip后總體積 < 50kb

靜態(tài)資源(HTML/CSS/JS/Image)是否優(yōu)化壓縮？

避免打包大型類庫

確保接入層已開啟Gzip壓縮（考慮提升Gzip級別，使用CPU開銷換取加載時間） 注意！

盡量使用CSS3代替圖片

初始首屏之外的靜態(tài)資源（JS/CSS）延遲加載 注意！

初始首屏之外的圖片資源按需加載（判斷可視區(qū)域） 注意！

單頁面應(yīng)用(SPA)考慮延遲加載非首屏業(yè)務(wù)模塊

開啟Keep-Alive鏈路復(fù)用

運行性能優(yōu)化, 達(dá)到操作足夠流暢

避免 iOS 300+ms 點擊延時問題 注意！

緩存 DOM 選擇與計算

避免觸發(fā)頁面重繪的操作

Debounce連續(xù)觸發(fā)的事件(scroll / resize / touchmove等)，避免高頻繁觸發(fā)執(zhí)行 注意！

盡可能使用事件代理，避免批量綁定事件

使用CSS3動畫代替JS動畫

避免在低端機上使用大量CSS3漸變陰影效果，可考慮降級效果來提升流暢度

HTML結(jié)構(gòu)層級保持足夠簡單

盡能少的使用CSS高級選擇器與通配選擇器

Keep it simple

在線性能檢測評定工具使用指南

訪問 Google PageSpeed 在線評定網(wǎng)站

在地址欄輸入目標(biāo)URL地址，點擊分析按鈕開始檢測

按 PageSpeed 分析出的建議進(jìn)行優(yōu)化，優(yōu)先解決紅色類別的問題

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

-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.如何禁止手機瀏覽器、微信瀏覽器的上下滑動露出黑色塊問題

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.動態(tài)設(shè)置頁面html，F(xiàn)ont-size的值，方便使用rem

//為頁面html動態(tài)設(shè)置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.定義瀏覽器點擊行為：

打電話給:020-10086
發(fā)短信給: 10086
發(fā)送郵件: me@22278.club


content 里面的參數(shù)：telephone=no 是禁止瀏覽器自動識別手機號碼，email=no 是禁止瀏覽器自動識別Email。

8.自定義蘋果圖標(biāo)
在網(wǎng)站文件根目錄放一個 apple-touch-icon.png 文件，蘋果設(shè)備保存網(wǎng)站為書簽或桌面快捷方式時，就會使用這個文件作為圖標(biāo)，文件尺寸建議為：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默認(rèn)的表單樣式*/
}

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

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

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

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

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指的是設(shè)備整個渲染區(qū)寬度（設(shè)備的實際寬度）

// 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) { .. }