易觀數據：2013 年中國移動網民 6.52 億，70.1% Android、26.1% iOS。高收入群體半數用 iOS，低收入群體 76% 用 Android。先搞清面對誰，才能在項目中做取捨。

PC 端「優雅降級」原則在移動端更嚴峻：Android 低端機 = 手機瀏覽器的「IE6」。碎片化極致（CPU/系統版本/瀏覽器內核），理解此前提下構思重構，才能最大化效率。

項目欣賞：三大代表作

1. TGA 移動遊戲官網 / 城市拉力賽
2. UP+ 邀請函
3. 天天酷跑裡約進擊版

11 大技術創意點（節選前 5 點，原文截斷）

1. CSS3 動畫：相互聯系又獨立的元素，中高端機

UP+ 邀請函大量使用。CSS3 動畫 = 元素從狀態 A 逐幀變狀態 B。基礎變換：scale/translate/rotate/skew + color/opacity，配合 transition/animation + delay。

① 獨立元素互動： 「我是玩家」屏：手柄常規進場，蓋倫常規進場，但位移軌跡重疊 → 碰撞效果，手柄彈開反饋。

② 單元素自我呈現： 小三角模仿風箏/飛機非直線軌跡（縮放+位移+旋轉+透明度），打破常規無聊感。

③ 3D 變換： 門打開效果。常規用幀動畫（多圖切換）費流量。純色矩形門用 `rotateY` 3D 旋轉，中心線定左側，零圖片成本。

2. Sprite 幀動畫：單獨形象多幀，無設備要求

傳統動畫思維：多圖切換形成動態。適合多細節逐幀，但圖片成本高（單張 119KB）。酷跑裡約版幾乎每頁角色都有 Sprite，總計 1.5MB → 手機端致命。上線第二天緊急只留審判女王動畫，訪問延時 16s→6s。慎用，嚴格斟酌成本收益。

3. 重力感應視差：相互獨立元素，中高端機

PC 靠鼠標，手機靠重力感應。手機水平改變 → 元素按深度位移速度不同 → 視差效果。用戶發現網頁與自己互動 → 好感度立增。

亦可做小遊戲（如重力感應球）。

4. 字體圖標：純色矢量圖，中高端機

字體特性：易改顏色/大小/變形。`@font-face` 為字體圖標而生。邀請函頁面所有純色矢量圖轉字體文件 → 節省 97.37% 帶寬（約 370KB），頁面加載巨大幫助。限制：單色、矢量。權衡風格與體積。

5. 自適應 SVG 圖形：基礎圖形，中高端機

邀請函貫穿 8 頁折線用 SVG 繪製，優勢：無限縮放不失真、代碼可控、動畫友好、體積極小。響應式佈局下完美適配各屏幕。

（原文截斷，後續 6 點含 Canvas、WebGL、觸摸事件優化、性能監控等，建議參考完整技術文檔）