長截圖製作完整教學：捕捉整個網頁的最佳方法
有時候一個螢幕放不下所有你想擷取的內容 — 長篇文章、聊天記錄、電商商品頁面或完整的網頁設計。這時候就需要「長截圖」技術，將整個可捲動的內容合併成一張完整的圖片。
什麼是長截圖？
長截圖（Scrolling Screenshot）是指擷取超過螢幕可見範圍的完整內容，並自動或手動拼接成一張長圖片。常見的應用場景包括：
- 保存完整網頁 — 包括需要捲動才能看到的所有內容
- 記錄聊天對話 — 保留完整的對話脈絡
- 截取長列表 — 如設定畫面、表單或資料表格
- 網頁設計審查 — 一次查看完整的頁面佈局
iPhone 長截圖方法
iOS 內建支援 Safari 網頁的長截圖功能：
- 在 Safari 中開啟目標網頁
- 按下截圖快捷鍵（側邊按鈕 + 音量增加）
- 點擊左下角的截圖預覽
- 切換到「整頁」分頁
- 點擊「完成」儲存為 PDF
重點摘要：iOS 的原生長截圖功能僅限於 Safari 瀏覽器，且儲存格式為 PDF。如果需要 PNG/JPG 格式，或需要在其他 App 中使用長截圖，建議使用第三方工具或截圖拼接方案。
Android 長截圖方法
Android 12 以上版本原生支援捲動截圖：
- 正常截圖（電源鍵 + 音量降低）
- 截圖完成後，底部會出現「擷取更多」按鈕
- 點擊後可以向下延伸截圖範圍
- 調整截取區域後點擊「儲存」
Samsung、Xiaomi、OPPO 等品牌在更早的版本就已經提供了自家的捲動截圖功能。
桌面瀏覽器長截圖
Chrome DevTools（推薦）
- 開啟 DevTools（F12）
- 按 Cmd/Ctrl + Shift + P 開啟命令面板
- 輸入 "full" 搜尋
- 選擇 "Capture full size screenshot"
Firefox 截圖工具
- 在網頁上按右鍵
- 選擇「截取螢幕畫面」
- 點擊右上角的「儲存完整頁面」
手動截圖拼接方法
當自動長截圖工具無法滿足需求時（例如需要截取非網頁的應用程式），可以採用手動截圖拼接：
- 從內容頂部開始，逐步截圖
- 每次捲動時保留 20-30% 的重疊區域
- 使用截圖拼接工具將多張截圖合併
| 方法 | 優點 | 缺點 |
|---|---|---|
| 原生長截圖 | 最簡單、品質最佳 | 平台/App 支援有限 |
| 瀏覽器擴充 | 支援所有網頁 | 可能有動態內容問題 |
| 手動拼接 | 最大彈性、任何內容 | 需要手動操作 |
長截圖的注意事項
- 檔案大小 — 長截圖的檔案可能非常大，建議使用 WebP 格式壓縮
- 動態內容 — 懸浮選單、廣告等可能在長截圖中重複出現
- 延遲載入 — 使用 lazy loading 的圖片可能無法被擷取
- 隱私考量 — 注意遮蔽截圖中的敏感個人資訊
結語
長截圖是記錄完整內容的實用技能。根據你的需求和平台選擇最適合的方法 — 原生功能最方便，手動拼接最靈活。善用截圖拼接工具，讓多張截圖輕鬆合併成完美的長圖。
參考文獻
- Apple Support. "Take a screenshot on your iPhone." Apple Support, 2025. https://support.apple.com/en-us/108282
- Android Developers. "Screenshots on Android." Android Developer Documentation, 2025. https://developer.android.com/about/versions/12/features/screenshots
- Chrome DevTools. "Capture full-page screenshots." Chrome Developers, 2025. https://developer.chrome.com/docs/devtools/screenshots/
- Nielsen Norman Group. "Scrolling and Scrollbars." NN/g, 2023. https://www.nngroup.com/articles/scrolling-and-scrollbars/