隨 iPhone 6/6 Plus 上市，iOS 8 正式推送。新設備、新分辨率帶來諸多變化，本文專為工程師與設計師梳理 10 大核心更新，基於實測與 WWDC 信息整理（蘋果官方文檔尚未更新）。

概覽

• Safari 更新詳情
• iPhone 6 / 6 Plus 適配要點
• 新 API 支持
• Safari 新功能與支持
• iOS 8 原生優化
• Safari 擴展
• 新設計語言
• 視頻增強
• iOS 8 上的 JavaScript
• 已知 Bug 與問題

Safari 核心更新

新增支持

• HTML5 新 API：WebGL (3D Canvas)、IndexedDB、Navigation Timing API、Crypto API
• 混合應用：更快、優化的 WebView
• 滾動 Scroll 事件終於支持
• 視頻播放：全屏 API、元數據 API
• HTML 模板元素
• Safari 擴展：原生 App 可以插件形式讀取網頁 DOM
• 圖片：Image Source Sets、APNG 動態圖
• CSS：Shapes、小數單位
• 瀏覽器自動填寫表單（含信用卡掃描）
• 網頁與本地應用交互：登錄數據共享
• ECMAScript 6 部分支持
• SPDY 協議
• Yosemite 遠程調試

尚不支持

• dp 單位 Media Queries
• getUserMedia / WebRTC
• @viewport 聲明
• Datalist / WebP 圖片

iPhone 6 / 6 Plus 適配關鍵

Viewport 尺寸

iPhone 6：375px（安卓同尺寸常為 360px）；iPhone 6 Plus：414px（安卓 5.5 吋常為 400px）。意味著 iOS 用戶可視內容約少 4%，需檢查網站適配。

適配 meta 標籤：

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

設備像素比

iPhone 6 維持 2x；iPhone 6 Plus 理論 3x（401 dpi），實際渲染像素 1242px，物理 1080px（縮小 13%）。3x 圖可兼容，但瀏覽器會先縮放再渲染。

圖標與啟動圖

• iPhone 6 Plus 圖標：180×180px；iPhone 6：120×120px
• 啟動圖尺寸：iPhone 6 為 750×1294，Plus 為 1242×2148

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

User Agent

所有 iOS 8 設備 UA 相同，服務端無法區分機型，需靠 JS / Media Queries 判斷。

新 API 亮點

• WebGL：3D 渲染，默認開啟，利好遊戲開發。
• IndexedDB：W3C 標準客戶端數據庫，跨瀏覽器統一 API。
• Navigation Timing API：精準測量加載渲染性能。

Safari 新功能細節

• 縮放手勢：橫屏捏合進入標籤預覽模式，可能與 gesturechange 衝突，需 preventDefault。
• 移除 minimal-ui
• 表單自動填寫與信用卡掃描：支持 autocomplete，可調用 Keychain 填充帳號密碼。
• RSS 訂閱入口：書籤欄顯示訂閱按鈕。
• 工具欄半透明：初次加載可視區域增大。
• iPad 更新：滾動自動隱藏工具欄，橫屏側邊欄保持 viewport 寬度僅改變 aspect-ratio。
• 書籤 Icon 顯示：地址欄搜索結果顯示網站圖標。

iOS 8 為 Web 開發帶來重大機遇，亦需注意適配細節與已知 Bug（如文件上傳失效），建議實機測試後再上線。