<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
| 問題 | 解決方案 |
|---|---|
| 字體單位選擇 | 少量適配用 px，多設備適配用 rem + 媒體查詢動態調整 html font-size |
| Touch 事件 | touchstart/move/end/cancel；winphone 用 MSPointerDown/Move/Up |
| 300ms 點擊延遲 | FastClick、Zepto tap、綁定 touchstart |
| Retina 屏圖片模糊 | 設計稿 2x，CSS background-size: 50%，元素尺寸除 2 |
| iOS 點擊灰色遮罩 | -webkit-tap-highlight-color: rgba(0,0,0,0) |
| Android 點擊邊框 | 同樣設置 tap-highlight-color，或用 div 代替 a/input |
| WP 點擊灰背景 | <meta name="msapplication-tap-highlight" content="no"> |
| 表單外觀重置 | -webkit-appearance:none；WP 用 ::-ms-expand/check/clear{display:none} |
| placeholder 顏色/換行 | ::-webkit-input-placeholder{color:#aaa}；iOS textarea 可換行 |
| 音視頻自動播放 | 需用戶交互觸發：document.addEventListener('touchstart',()=>audio.play()) |
| 搖一搖 | HTML5 devicemotion 事件獲取加速度 |
| 拍照/上傳 | <input type="file" accept="image/*">，iOS 全功能，Android 僅選圖，WP 不支持 |
| 微信字體縮放 | Android 用 WeixinJSBridge.setFontSizeCallback；iOS 用 -webkit-text-size-adjust:100%；最佳方案：全站 rem/百分比佈局 |
| Transition 閃屏 | -webkit-transform-style:preserve-3d; -webkit-backface-visibility:hidden |
| 硬件加速 | transform:translate3d(0,0,0) 開啟 GPU |
| iOS 首字母大寫 | <input autocapitalize="off" autocorrect="off"> |
| Android 語音輸入按鈕 | input::-webkit-input-speech-button{display:none} |
transform/opacity（合成層），避免 left/top 觸發重排。translate3d 開啟 GPU 加速。| 框架 | 用途 | 官網 |
|---|---|---|
| Zepto.js | 類 jQuery API，極輕量 | zeptojs.com |
| iScroll.js | 彈性滾動、fixed 修復、下拉刷新 | cubiq.org/iscroll-5 |
| Underscore.js | 函數式工具庫 | underscorejs.org |
| Slip.js / iSlider.js / fullpage.js | 滑屏切換 | - |
| FastClick | 消除 300ms 延遲 | github.com/ftlabs/fastclick |
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
注意：Flex 子元素必須為塊級元素，否則 Android 2.3 失效。
