在行動網頁開發中,`撥打電話` 是實現一鍵撥號的標準做法。然而,許多開發者發現:在 Android 上運作正常,到了 iPhone (iOS Safari) 卻完全無反應,甚至嘗試 `tel://`、`tel:...#mp.weixin.qq.com` 等變體依然失效。
核心原因:HTML5 標準 ≠ 瀏覽器實作
`tel:` 協議雖屬 HTML5 標準,但能否喚起系統撥號介面,取決於瀏覽器引擎與作業系統層級的支援度。iOS Safari 對 `tel:` 的處理機制較嚴格,常見阻礙包括:
- 頁面在 `
- 使用者未曾與頁面互動(如點擊),瀏覽器阻擋自動觸發。
- 號碼格式包含特殊字元(如 `+86-`、空格、括號),導致解析失敗。
- iOS 版本過舊(iOS 10 以前對 `tel:` 支援不穩定)。
最佳實踐與替代方案
- 純淨號碼格式: 僅保留數字與 `+` 號,例如 `tel:+8613800138000`。
- 使用者手勢觸發: 確保連結由真實點擊事件產生,避免 `javascript:` 跳轉或 `location.href` 自動導向。
- 提供回退方案: 同時顯示電話號碼文字,方便使用者手動複製撥打。
- WebView 應用內: 若在 APP 內嵌網頁,需在原生代碼中攔截 `tel:` Scheme 並呼叫 `UIApplication.shared.openURL`。
簡言之:`tel:` 只是協議約定,能否生效全看瀏覽器與系統「買不買單」。遵循上述規範,能最大幅度提升跨平台相容性。