同一網頁在不同瀏覽器呈現差異，源於渲染引擎 (排版引擎) 實作細節不同。市面瀏覽器眾多，若逐一測試成本極高。核心策略：**依渲染引擎分類 → 每類挑選 1-2 典型代表 → 搭配作業系統與解析度排列組合 → 形成最小覆蓋率測試矩陣**。

四大主流渲染引擎陣營 (2024 更新版)

引擎代號	核心特色	典型代表瀏覽器 (2024)
Blink (WebKit 分支)	Chrome 核心，效能極佳、標準支援最激進、更新最快	Chrome、Edge (Chromium)、Brave、Vivaldi、Opera、360 極速模式、搜狗高速模式
WebKit	Apple 維護，iOS/macOS 系統預設，嚴格遵循標準	Safari (iOS/macOS/iPadOS)、GNOME Web
Gecko	Mozilla 開源，跨平台、隱私優先、標準支援完善	Firefox、Firefox ESR、LibreWolf、Floorp、Thunderbird (郵件客戶端)
Trident / MSHTML (維護模式)	IE 核心，僅 Win10/11 相容模式存續，企業舊系統專用	IE 11、Edge IE 模式、部分國產瀏覽器相容模式

> **註**：早期 Presto (Opera 12 前) 已停止開發；國產「雙核」瀏覽器多為 Trident + Blink 切換。

建構測試矩陣範例

測試環境 ID	作業系統	瀏覽器 (引擎)	解析度	備註
TC-01	Windows 11 23H2	Chrome 最新穩定版 (Blink)	1920×1080	主流桌面首選
TC-02	Windows 11 23H2	Firefox 最新版 (Gecko)	1366×768	次主流桌面
TC-03	Windows 10 22H2	Edge IE 模式 (Trident)	1920×1080	企業舊系統相容
TC-04	macOS Sonoma	Safari 最新版 (WebKit)	2560×1600 (Retina)	Mac 主流
TC-05	iOS 17 (iPhone 15)	Safari (WebKit)	393×852	行動端首選
TC-06	Android 14 (Pixel)	Chrome for Android (Blink)	393×851	行動端首選
TC-07	Ubuntu 22.04 LTS	Firefox Snap (Gecko)	1920×1080	Linux 桌面代表

測試重點項目

• CSS Grid/Flexbox/Container Queries 佈局崩壞
• JS ES2024 新語法 (如 Object.groupBy, Promise.withResolvers) 支援度
• Web Components (Shadow DOM, Custom Elements) 隔離行為
• 觸控/滑鼠/鍵盤事件差異 (pointer events vs touch events)
• 影音編碼 (AV1, HEVC, Opus) 播放相容性
• CSP、COOP/COEP、Permissions-Policy 等安全標頭效果
• PWA 安裝與 Service Worker 離線快取行為

工具輔助

• BrowserStack / Sauce Labs / LambdaTest：雲端真機瀏覽器矩陣，支援自動化截圖比對。
• Playwright / Puppeteer / Cypress：跨瀏覽器 E2E 自動化測試框架。
• Can I use / MDN Browser Compat Data：查詢特定 API 支援度。

以引擎為核心建構矩陣，再疊加 OS 與解析度，即能以最小成本覆蓋 95%+ 使用者場景，兼顧品質與效率。