瀏覽器與相容性

瀏覽器是看網頁的工具

網站存在主機上，瀏覽器負責把它下載回來，並顯示成你看到的畫面。

可以想成播放器——同一段影片，用不同的播放器打開，畫質與呈現可能略有不同。網頁也是類似的道理。

常見的瀏覽器

市佔情況會隨時間變動，規劃網站時建議看自己網站的實際數據，而不是通用的統計——不同產業與客群的分布差異很大。

查看方式見流量分析基本上要看什麼。

「引擎」決定了顯示行為

瀏覽器的核心是渲染引擎——負責把程式碼轉換成畫面的部分。

目前主流的引擎只有少數幾種，而多個瀏覽器可能共用同一種引擎。

實務上的意義

• 使用相同引擎的瀏覽器，顯示結果通常很接近
• 使用不同引擎的，差異較明顯——這是測試時要涵蓋不同引擎的原因
• 手機版與電腦版即使是同一個品牌，行為也可能不同

為什麼要在意這件事

作為業主，你不需要懂技術細節，但知道以下三點會有幫助：

一、你看到的不代表所有人看到的

你用的瀏覽器可能不是客戶用的。 驗收時只用自己習慣的瀏覽器看，可能漏掉問題。

二、相容性是有成本的

要支援越多、越舊的瀏覽器，開發與測試的工時就越高。這應該在發包時就談清楚。

見該支援到哪些瀏覽器。

三、多數「網站壞掉」其實是本機問題

快取、擴充功能、舊版本、網路環境——這些都可能造成你看到異常，但其他人正常。

排查方式見我這邊有問題但別人正常。

瀏覽器會自動更新

現代的瀏覽器多半會在背景自動更新到新版本。這帶來兩個影響：

好處

• 安全漏洞會被修補
• 新的網頁技術逐漸普及
• 使用者停留在很舊版本的比例降低

要注意的

• 瀏覽器更新後，原本正常的網站可能出現問題——雖然不常見，但確實會發生
• 企業環境可能鎖定版本，員工的瀏覽器較舊

建議每季用主要的幾個瀏覽器檢查一次網站，而不是等客戶反映。

應用程式內建的瀏覽器

這一項最常被忽略。

從通訊軟體或社群平台的連結點進網站時，開啟的通常不是你平常用的瀏覽器，而是該應用程式內建的簡易瀏覽器。

它可能有的限制

• 部分功能不支援
• 下載檔案的行為不同
• 無法使用某些登入方式
• 畫面上下方可能被應用程式的介面遮住

如果你的客戶主要透過通訊軟體分享連結，這個情境一定要實測。

手機端的相關問題見手機版破版與常見問題排查。

瀏覽器的差異不只是外觀

可能出現差異的地方包含：

• 字體的呈現——同一個字體在不同系統上的粗細與間距略有不同
• 表單元件的樣式——下拉選單、日期選擇器各家長得不一樣
• 影片與音訊的播放行為
• 新技術的支援程度
• 預設的間距與行高

「完全一模一樣」不是合理的期待，合理的目標是「功能都能用、版面沒有破損、閱讀不受影響」。

詳見為什麼同一個網站在不同瀏覽器不一樣。

給業主的三個實用建議

1. 驗收時至少用兩種不同的瀏覽器看過，並且電腦與手機各一次
2. 從通訊軟體點連結進去測一次
3. 看自己網站的數據，了解客戶實際用什麼

各瀏覽器的版本、介面與支援情況持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

差異是正常的，不是做壞了

先建立這個認知：同一個網站在不同瀏覽器上有細微差異，是網頁的常態。

合理的目標不是「像素完全一致」，而是：

• 所有功能都能正常使用
• 版面沒有破損或重疊
• 文字清晰可讀
• 整體視覺印象一致

追求完全一致的代價很高，而且效益有限。

差異的五個來源

一、預設樣式不同

每個瀏覽器對基本元素都有自己的預設樣式——標題的大小、段落的間距、清單的縮排、按鈕的外觀。

網頁設計通常會用一套基礎設定來抹平這些差異，但無法做到百分之百。

二、字體的呈現

同一個字體在不同作業系統上的算繪方式不同，會造成：

• 粗細看起來略有差異
• 字距與行高略有不同
• 整段文字的長度可能不一樣，導致換行位置不同

如果某段文字剛好卡在換行邊緣，不同瀏覽器可能一個換行一個不換——這是常見的細微差異。

三、表單元件的外觀

下拉選單、核取方塊、日期選擇器、檔案上傳按鈕，各瀏覽器與各作業系統的長相都不同。

要統一外觀需要額外的開發，而且可能犧牲原生的操作便利性——尤其在手機上。

四、新技術的支援程度

網頁技術持續發展，新的功能不會同時在所有瀏覽器上可用。

常見的處理方式是「漸進增強」——基本功能所有瀏覽器都能用，較新的效果只在支援的瀏覽器上呈現。

這是合理的做法：舊瀏覽器的使用者仍能完成所有事情，只是視覺效果較單純。

五、版本差異

即使是同一個瀏覽器，新舊版本的行為也可能不同。企業環境中鎖定舊版本的情況不少見。

哪些差異需要處理

判斷原則

影響「能不能用」的要處理，只影響「好不好看」的細微差異可以接受。

驗收時用這個標準溝通，會比「跟設計稿不一樣」更有效率。

手機與電腦本來就不同

這不是相容性問題，而是刻意的設計。

響應式設計會依螢幕寬度調整版面——手機上是一欄式、選單收合；電腦上是多欄並排。內容是同一份，只是排法不同。

常見的誤會

「手機版跟電腦版不一樣，是不是做錯了？」——不一樣才是正確的。 把電腦版整個縮小塞進手機才是問題。

見手機版優先的設計思維。

為什麼設計稿與實際網頁會有落差

設計稿是固定尺寸的圖片，網頁則是會隨螢幕大小變化的。所以：

• 設計稿只能呈現特定寬度下的樣子
• 實際網頁要適應各種寬度
• 文字量不同時，版面高度會變動
• 字體在不同系統上的呈現略有差異

合理的驗收方式

比對「設計意圖是否實現」，而不是逐像素比對。

例如：層級關係對不對、重點是否突出、間距是否協調——這些比「這裡差兩個像素」更有意義。

見斷點與設計稿的檢視。

常見的具體差異情境

文字換行位置不同

字體算繪差異造成，通常可以接受。若標題剛好斷在奇怪的地方，可以調整文案或設定。

陰影或圓角略有不同

細微的算繪差異，一般不需處理。

影片無法自動播放

多數瀏覽器基於使用者體驗的考量，限制帶聲音的自動播放。 這是刻意的設計，不是錯誤。

常見的處理是預設靜音播放，並提供開啟聲音的按鈕。

字體沒有正確顯示

可能是網頁字型載入失敗，或該字體在系統上不存在而回退到替代字體。

驗收時的實務建議

1. 先用主要的瀏覽器確認功能都正常
2. 再用第二種瀏覽器確認沒有破版
3. 手機實機測試——不要只用電腦縮小視窗
4. 把「不能用」與「不好看」分開列

第四項能大幅提升溝通效率。 廠商會優先處理功能問題，視覺細節則可以討論是否值得投入。

各瀏覽器的版本、介面與支援情況持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

相容性範圍要在發包時談

「網站要能在所有瀏覽器正常顯示」聽起來合理，但實務上不可行——因為瀏覽器的種類、版本、裝置組合是無限的。

合理的做法是約定一個明確的支援範圍，寫進報價單或合約。

常見的約定方式

依瀏覽器與版本

支援主流瀏覽器的最新版本與前一個版本

這是目前最常見也最務實的寫法。因為現代瀏覽器多半自動更新，停留在很舊版本的使用者比例已經很低。

依裝置類型

支援桌機、平板、手機三種尺寸區間

依市佔比例

支援佔網站流量 N% 以上的瀏覽器

這種寫法的好處是依實際數據判斷，但前提是網站已經有數據可看——新網站通常沒有。

怎麼決定範圍

一、看自己網站的實際數據

如果是改版，直接看現有網站的分析資料——訪客實際用什麼瀏覽器、什麼裝置、什麼版本。

這比任何通用統計都準確。不同產業的客群差異可能很大。

二、考慮客群特性

• 年齡層較高的客群——可能使用較舊的裝置
• 企業採購客戶——公司電腦可能鎖定舊版本
• 政府或特定產業——可能有指定的相容性要求
• 一般消費者——手機比例通常過半

三、考慮成本

支援越舊的環境，成本越高，因為：

• 新的網頁技術不能用，要改用較繁瑣的做法
• 需要額外的測試工時
• 可能需要為舊環境準備替代方案

舊版瀏覽器的處理

某些已終止支援的瀏覽器仍可能出現在少數企業環境中。

務實的判斷

• 如果數據顯示幾乎沒有人用——不必特別支援
• 如果有重要客戶在用——可以考慮提供簡化版本或提示訊息

常見的處理方式

對不支援的舊瀏覽器，顯示一則提示訊息建議升級，而不是花大量成本讓網站在上面完美運作。

已終止支援的瀏覽器本身就有安全風險，建議使用者升級是合理的。

要一併約定的三件事

一、測試的裝置與環境

「支援手機」是哪些手機？建議約定：

• 測試的螢幕寬度區間
• 測試的作業系統
• 是否包含平板

二、驗收的標準

把「功能正常」與「視覺一致」分開約定：

• 功能面——所有支援範圍內都要能正常使用
• 視覺面——不破版、可閱讀即可，不要求像素一致

這個區分能避免驗收時的爭議。

三、保固期內的處理

• 支援範圍內發現的問題，保固期內修正
• 瀏覽器改版造成的問題——這一項要特別談，通常屬於維護範疇

第二項最容易產生爭議。 瀏覽器更新不是廠商造成的，但確實需要工時處理。沒有事先約定，容易變成「這算不算保固」的爭執。

界線說明見保固與維護有什麼不同。

App 內建瀏覽器要不要納入

這一項建議明確提出。

從通訊軟體或社群平台點連結時，開啟的是該應用程式的內建瀏覽器，行為可能與一般瀏覽器不同。

如果你的客戶主要透過通訊軟體分享連結

那這個情境比某些冷門瀏覽器更重要，應該納入測試範圍。

無障礙的相關考量

如果有無障礙的需求，測試範圍還會包含輔助技術——例如螢幕報讀軟體。

這屬於另一個層次的要求，應該獨立約定，見無障礙網站是什麼。

發包時可以直接問的四個問題

1. 會測試哪些瀏覽器與裝置？
2. 驗收的標準是什麼？ 功能與視覺分別怎麼認定
3. 會用實機測試嗎？ 還是只用電腦模擬
4. 日後瀏覽器改版造成問題，怎麼處理？

第三題值得問。 用電腦縮小視窗模擬手機，與實際在手機上操作，體驗差異不小——觸控、鍵盤彈出、字體呈現都不同。

不要過度追求相容性

最後一個務實的提醒。

把預算花在支援極少數人使用的舊環境，通常不如把同樣的錢投入內容、速度或轉換率的改善。

合理的做法是：確保主流環境完全正常，少數環境可用即可。

各瀏覽器的版本、介面與支援情況持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

為什麼會看到舊的內容

瀏覽器為了加快速度，會把看過的網頁資料暫存在你的電腦上。下次再訪時直接使用暫存的版本，就不用重新下載。

這叫做快取。它讓瀏覽速度變快，但也造成一個問題：網站更新之後，你可能還看到舊的版本。

原理見動態網站為什麼比較慢？快取的作用。

先用最簡單的方法判斷

遇到「改了看不到變化」時，第一步是開無痕視窗。

無痕視窗的快捷鍵

怎麼判讀結果

• 無痕視窗看得到新內容 → 是你的瀏覽器快取，只有你看到舊的，其他人正常
• 無痕視窗也是舊的 → 問題在伺服器端，需要清除網站或加速服務的快取

這一步能省下大量的猜測與往返溝通。

強制重新整理

比一般的重新整理更徹底，會略過快取重新下載。

這是最快的方法，多數情況試這個就夠了。

清除快取

如果強制重新整理沒用，可以清除快取。各瀏覽器的位置略有不同，但通常在設定中的「隱私」或「瀏覽資料」相關項目。

清除時的注意事項

• 只清除「快取的圖片和檔案」即可
• 不要一併清除密碼與 Cookie——那會讓你登出所有網站
• 時間範圍可以選擇最近一小時或一天，不必全部

很多人清除時把所有項目都勾了，結果所有網站都要重新登入——這是不必要的。

只清除單一網站的資料

多數瀏覽器可以只清除特定網站的資料，做法通常是：

1. 開啟該網站
2. 點擊網址列左側的圖示
3. 找到網站設定或 Cookie 相關選項
4. 清除該網站的資料

這樣不會影響其他網站的登入狀態。

手機上怎麼清

一般做法

在瀏覽器的設定中找到隱私或瀏覽資料的選項清除。

更簡單的方法

• 開無痕分頁
• 切換到行動網路——排除 Wi-Fi 環境的快取
• 換一個瀏覽器開啟

應用程式內建瀏覽器的快取

從通訊軟體點連結開啟的頁面，快取可能存在該應用程式中。

處理方式：在該頁面選擇「用瀏覽器開啟」，或清除該應用程式的快取。

其他層級的快取

如果無痕視窗也看到舊內容，代表問題不在你這端。可能的來源：

驗收時值得確認

後台有沒有「清除快取」的功能？ 沒有的話，每次更新內容都要請廠商處理。

圖片改了但還是舊的

這是最常見的情況，而且清快取往往不管用。

原因

如果新圖片用了與舊圖片相同的檔名，各層的快取可能仍認為那是同一個檔案而不重新下載。

最可靠的解法

換一個檔名上傳。

例如把 banner.jpg 改成 banner-2026.jpg。這比清除各層快取快得多，也更確實。

圖片處理的原則見圖片怎麼上傳才正確。

分享到社群時顯示舊的圖片

社群平台會快取先前抓取的分享資訊。處理方式：

1. 使用該平台提供的分享除錯工具——通常可以強制重新抓取
2. 換一個圖片檔名——同樣是最可靠的方法
3. 等待快取自然過期

見LINE 分享網頁時的縮圖與標題怎麼設定。

不要養成隨手清快取的習慣

快取是有價值的——它讓網站載入更快、節省流量。

建議的順序是：

1. 先用無痕視窗確認問題在哪一端
2. 需要時用強制重新整理
3. 真的必要才清除快取
4. 更新資源時直接改檔名——從源頭避免問題

教客戶的簡易說法

如果客戶反映「改了看不到」，可以請他：

請按 Ctrl + F5（Mac 是 Command + Shift + R）重新整理一次。如果還是一樣，請用無痕視窗開啟看看。

這兩句話能解決大部分的狀況，也能快速判斷是不是真的有問題。

各瀏覽器的版本、介面與支援情況持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

先確認範圍：只有你，還是所有人

這是排查的第一步，也是最能節省時間的一步。

如果只有你看到異常，那就是本機環境的問題，不需要驚動廠商。

三分鐘的快速排查

依序試這四件事，多數問題會在這裡解決：

1. 開無痕視窗——排除快取與擴充功能
2. 用手機的行動網路開啟——排除公司網路與 Wi-Fi 環境
3. 換一個瀏覽器——排除該瀏覽器的特定問題
4. 請同事開一次看看——確認是不是只有你

怎麼判讀

常見的本機原因

一、快取

最常見。症狀是「改了看不到變化」或「顯示舊的內容」。

處理方式見清除快取與強制重新整理怎麼做。

二、瀏覽器擴充功能

廣告阻擋、隱私保護、翻譯、購物比價這類擴充功能，可能：

• 擋掉網頁上的某些元素——導致區塊消失或空白
• 影響表單的送出
• 干擾影片或地圖的顯示
• 改變頁面的樣式

無痕視窗預設會停用多數擴充功能，所以它是很好的判斷工具。

三、瀏覽器版本太舊

如果很久沒更新，某些新的網頁功能可能不支援。檢查是否有可用的更新。

四、縮放比例

不小心按到縮放，畫面會變得很大或很小，也可能造成版面看起來異常。

按 Ctrl + 0（Mac 是 Command + 0）可以還原為 100%。

五、網路環境

• 公司防火牆可能擋掉某些資源——例如外部的字型或影片服務
• 公司的網路快取
• 網路不穩導致部分檔案沒載入完成

用手機的行動網路測試，能快速排除這一類。

不同的症狀對應不同的原因

整個網站打不開

1. 用手機行動網路試——確認不是網路問題
2. 試著開其他網站——確認不是整體網路斷線
3. 如果別人也打不開，可能是網站或主機的問題

可能的環節見打開一個網頁時發生了什麼事。

某些圖片不顯示

• 快取問題
• 擴充功能擋掉了
• 圖片檔案真的遺失或路徑錯誤

如果別人也看不到，那就是網站的問題。

版面跑掉、文字重疊

• 瀏覽器縮放比例不是 100%
• 視窗寬度剛好卡在版面切換的邊界
• 樣式檔案沒有載入成功

手機端的破版排查見手機版破版與常見問題排查。

表單送不出去

• 擴充功能干擾
• 必填欄位沒填但錯誤訊息不明顯
• 網站本身的問題

先用無痕視窗試一次，能排除擴充功能的因素。

登入之後又被登出

• 瀏覽器封鎖了 Cookie
• 剛清除過瀏覽資料
• 系統的登入時效設定

顯示「不安全」的警告

這一類要特別注意，因為原因可能在網站端。

• 網站沒有加密——網址是 http 開頭
• 憑證過期——這是網站的問題，要盡快處理
• 頁面中混雜了未加密的資源
• 你電腦的日期時間不正確

最後一項容易被忽略——系統時間錯誤會讓憑證的驗證失敗。

詳見SSL 常見問題排查。

確認是網站的問題之後

回報時提供這些資訊，能大幅加快處理：

1. 完整的網址——哪一頁
2. 截圖——含網址列
3. 使用的裝置與瀏覽器
4. 什麼時候開始的
5. 是所有人都這樣，還是只有你
6. 已經試過哪些排除方法

第六項特別有幫助——說明「已經用無痕視窗試過還是一樣」，可以讓對方直接跳過那一輪確認。

不建議的做法

• 只說「網站怪怪的」——對方無從查起
• 只截圖不附網址——不知道是哪一頁
• 沒有先自行排除就回報——多數情況其實是本機問題

建立一個簡單的習慣

遇到問題時先問自己三個問題：

1. 無痕視窗也一樣嗎？
2. 手機行動網路也一樣嗎？
3. 別人也看得到嗎？

三個都「是」才需要回報。 這個習慣能省下雙方大量的時間。

各瀏覽器的版本、介面與支援情況持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

差別不只是螢幕比較小

手機瀏覽器與電腦瀏覽器在操作方式、可用空間、系統行為上都不同。理解這些差異，才知道測試時該注意什麼。

一、觸控與滑鼠的根本差異

最重要的一項：沒有「滑過」

電腦上把滑鼠移到選單上就會展開子選單，手機上沒有這個動作。

如果設計時依賴滑過的效果，手機使用者可能：

• 點一下才展開，再點一下才進入——多了一步
• 或是直接跳走，根本看不到子選單

測試時務必實際在手機上操作選單，這是常見的問題來源。

點擊區域要夠大

手指的接觸面積比滑鼠游標大得多。太小或太密集的按鈕在手機上很難按準。

常見問題：連結之間間距太近、關閉按鈕太小、表格中的操作按鈕擠在一起。

二、可用高度會變動

這是手機特有的問題。

手機瀏覽器的網址列會隨著捲動自動收起或展開，這代表可見區域的高度是變動的。

造成的問題

• 設計成「剛好滿一屏」的區塊，可能被切掉一部分
• 固定在畫面底部的元素，可能被瀏覽器介面遮住
• 捲動時版面出現輕微跳動

不要假設可見高度是固定的。 重要內容不要卡在畫面邊緣。

三、鍵盤彈出會擠壓版面

點擊輸入欄位時，虛擬鍵盤會佔掉螢幕的一大部分。

常見的問題

• 送出按鈕被鍵盤遮住——使用者找不到怎麼送出
• 正在輸入的欄位被推到看不見的位置
• 固定在底部的元素浮到鍵盤上方，擋住內容

測試表單時一定要實際在手機上填一次，確認每個欄位在鍵盤彈出時都還看得到。

表單設計的原則見手機版表單怎麼設計才不會流失客戶。

四、輸入欄位的類型會影響鍵盤

如果欄位有正確標示類型，手機會自動叫出對應的鍵盤：

• 電話欄位——直接顯示數字鍵盤
• Email 欄位——鍵盤上會有 @ 符號
• 網址欄位——會有 .com 之類的捷徑

這是成本極低但體驗差異明顯的細節，驗收時可以確認。

五、自動縮放與字級

某些情況下，點擊輸入欄位時畫面會自動放大——這通常是因為欄位的字級設定太小。

放大之後畫面就跑掉了，使用者要自己縮回來，體驗很差。

另外，使用者可能在系統設定中調整了字級偏好。版面應該能容納較大的字，不會因此破版。

相關說明見無障礙網站的實作檢查清單。

六、應用程式內建的瀏覽器

從通訊軟體或社群平台點連結時，開啟的通常是該應用程式內建的簡易瀏覽器，而不是你設為預設的那個。

可能的限制

• 部分功能不支援——某些登入方式、檔案下載
• 畫面上下方被應用程式的介面佔用
• 快取行為不同
• 無法使用你在正常瀏覽器裝的擴充功能

務必實測的情境

如果你的客戶常透過通訊軟體收到連結，這個情境比某些冷門瀏覽器更重要。

測試方式：把網址傳給自己，從通訊軟體點進去操作一次。

七、桌面版網站選項

手機瀏覽器通常有「切換為桌面版網站」的選項。使用者切換後，會看到未經手機調整的版面。

這通常不需要特別處理，但如果客戶反映「手機上看起來很小、要一直放大」，可以先確認他是不是誤開了這個選項。

八、網路環境的差異

手機使用者可能在行動網路下瀏覽，速度與穩定性不如辦公室的網路。

這代表：

• 圖片大小的影響更明顯
• 載入太慢時，離開的比例更高
• 不穩定時可能部分資源沒載入完成

測試速度時建議用行動網路實測，不要只用辦公室的網路。

見怎麼測網站速度。

用電腦模擬不能取代實機

電腦的開發者工具可以模擬手機尺寸，這在開發時很方便，但無法取代實機測試。

模擬看不出來的事

• 觸控的實際手感與點擊準確度
• 鍵盤彈出的影響
• 網址列收合造成的高度變化
• 實際的載入速度
• 字體在該裝置上的呈現
• 應用程式內建瀏覽器的行為

驗收時應要求實機測試，並自己也用手機操作一次。

手機測試的檢查清單

1. 選單能正常展開與收合
2. 所有按鈕都好按，不會誤觸
3. 表單每個欄位在鍵盤彈出時都看得到
4. 送出按鈕不會被鍵盤遮住
5. 電話號碼可以一鍵撥出
6. 圖片與表格不會超出畫面
7. 文字不用放大就看得清楚
8. 從通訊軟體點連結進去也正常

破版問題的排查見手機版破版與常見問題排查。

各瀏覽器的版本、介面與行為持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

瀏覽器的提示分成三個等級

等級越高，越不應該忽略。 尤其第三種，除非你非常確定，否則不要繼續。

一、「不安全」的提示

網址列顯示「不安全」，代表這個網站沒有使用加密連線，網址是 http 開頭。

實際的影響

• 你輸入的資料會以明文傳輸
• 傳輸過程中可能被攔截或竄改
• 訪客看到警告，多數會直接離開

如果是自己的網站

應該立即處理——申請憑證並設定全站轉向。現在憑證多數可以免費取得且自動續期，沒有理由不裝。

見SSL 是什麼？網站為什麼一定要安裝。

混合內容的情況

有時候網站已經是 https，但仍顯示不完全安全。這通常是頁面中有以 http 載入的圖片或其他資源。

常見來源是內文中寫死的舊網址。處理方式見SSL 常見問題排查。

二、憑證相關的警告

這一類會出現整頁的攔截畫面。常見的原因：

先確認自己的系統時間

這一項最容易被忽略。電腦的日期時間不正確時，憑證的有效期驗證會失敗，即使網站完全正常也會出現警告。

如果只有你看到警告，先檢查系統時間。

公司網路的情況

部分企業網路會進行內容檢查，這可能觸發憑證相關的提示。如果在公司出現、用手機行動網路正常，可以詢問網管人員。

不要輕易點「繼續前往」

這個選項存在是為了特殊情況，但在不確定原因時，繼續前往等於放棄了加密的保護。

尤其是要輸入帳號密碼或付款資訊的頁面，絕對不要在有警告的情況下繼續。

三、危險網站的警告

紅色的全頁警告，通常表示該網址被判定為釣魚網站、惡意程式散布，或已被入侵。

如果是別人的網站

不要繼續。 這類判定通常有依據，風險很高。

如果是自己的網站

這是緊急狀況，代表網站可能已被入侵並植入惡意內容。

處理順序：

1. 立即聯繫廠商或維護方
2. 查看搜尋主控台的安全性通知——通常會說明偵測到什麼
3. 清除惡意內容並修補漏洞
4. 提出重新審查

警告移除後，排名與流量不會立刻恢復——這也是預防遠比事後處理划算的原因。

完整處理見網站被入侵後怎麼處理與復原。

四、下載相關的提示

下載檔案時可能出現「此檔案可能有害」之類的提示。原因可能是：

• 檔案類型本身有風險——例如可執行檔
• 來源網站的信譽不足
• 該檔案很少被下載，系統無法判斷

如果是自己網站提供的檔案

建議：

• 優先提供 PDF 而非可執行檔或壓縮檔
• 確保網站有加密連線
• 檔名清楚，讓使用者知道下載的是什麼

五、彈出視窗被封鎖

瀏覽器預設會封鎖非使用者主動觸發的彈出視窗。

對網站的影響

如果網站的功能依賴彈出視窗——例如列印、付款頁面、外部登入，可能被封鎖而導致功能失效。

建議的做法

• 盡量不要依賴彈出視窗
• 必須使用時，確保是由使用者的點擊直接觸發
• 提供備援方式——例如「若視窗未開啟，請點此」

一個重要的澄清

看到鎖頭，不代表這個網站可以信任。

鎖頭只表示「連線是加密的」——詐騙網站也可以申請憑證。

判斷網站是否可信的方法

• 看網域是不是正確的——不是看頁面上有沒有出現品牌名稱
• 確認有完整的公司資訊與聯絡方式
• 從官方管道進入，不要點來路不明的連結

網址的判讀方式見網址結構怎麼看，釣魚的防範見郵件的安全防護與詐騙防範。

自己網站該做的檢查

1. 網址列有沒有任何警告
2. 後台登入頁也是加密的嗎
3. 主要頁面都檢查過，沒有混合內容
4. 憑證到期日納入到期管理
5. 搜尋主控台的通知信箱有人在看

第四項最實際。 憑證過期會讓所有訪客看到警告，而且通常是客戶通知你才發現。

各瀏覽器的版本、介面與行為持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

擴充功能會改變網頁的呈現

瀏覽器的擴充功能可以修改網頁的內容與行為。這是它們的功能，但也代表它們可能影響網站的正常運作。

常見的類型：廣告阻擋、隱私保護、翻譯、密碼管理、購物比價、截圖工具、開發輔助。

一、廣告阻擋的影響

這是影響最廣泛的一類。

可能被擋掉的東西

• 分析與追蹤程式碼——最常見
• 廣告版位
• 某些嵌入的內容——影片、地圖、社群外掛
• 名稱中含有特定關鍵字的元素——例如區塊的命名剛好符合阻擋規則
• 彈出視窗與通知

最容易被誤擋的情況

如果網頁上某個區塊的命名剛好符合廣告阻擋的規則，那個區塊可能整個消失，即使它根本不是廣告。

症狀是：某些使用者看不到某個區塊，但多數人正常。

對數據的影響

這一點對業主特別重要：使用廣告阻擋的訪客，可能不會被分析工具記錄到。

這代表：

• 你的實際訪客數可能比數據顯示的更多
• 不同工具的數字對不起來是正常的
• 技術類客群的落差可能更明顯

所以應該看趨勢，不要糾結絕對數字。 見數據判讀的常見誤解。

二、翻譯功能造成的版面異常

瀏覽器內建或擴充的翻譯功能，會把頁面文字換成另一種語言。

可能的問題

• 翻譯後的文字長度不同，造成版面撐開或跑掉
• 按鈕上的文字變長而超出
• 專有名詞被誤譯
• 某些動態產生的內容翻譯不完整，變成中英夾雜

如果客戶反映「版面怪怪的」

可以先確認他是不是開啟了翻譯功能——這是容易被忽略的原因。

三、密碼管理與自動填入

密碼管理工具會在表單欄位上加入自己的圖示或按鈕。

可能的問題

• 圖示遮住欄位中的文字
• 自動填入了錯誤的欄位
• 與網站自己的驗證機制衝突

這類問題通常不嚴重，但測試表單時值得用無痕視窗再確認一次。

四、惡意擴充功能的風險

這一類是真正的資安問題。

惡意擴充能做什麼

• 讀取你瀏覽的所有網頁內容——包含後台與網路銀行
• 竊取登入資訊
• 修改網頁內容——例如竄改顯示的匯款帳號
• 植入廣告或轉址
• 記錄你的瀏覽行為

風險的來源

• 安裝來路不明的擴充
• 原本正常的擴充被轉手他人後加入惡意程式——這是實際發生過的情況
• 擴充要求過多的權限

安全的使用習慣

1. 只從官方的擴充商店安裝
2. 安裝前看權限要求——一個計算機工具不需要讀取所有網頁
3. 定期檢視已安裝的清單，移除不再使用的
4. 用來登入後台或處理財務的瀏覽器，盡量不裝擴充

第四項是很實用的做法——用一個乾淨的瀏覽器專門處理重要事務。

五、企業環境的擴充

公司電腦可能由資訊部門統一安裝管理工具或安全軟體，這些也可能影響網頁顯示。

如果只有公司電腦有問題、家裡或手機正常，可以詢問資訊人員。

用無痕視窗判斷

這是最快的判斷方式：無痕視窗預設會停用多數擴充功能。

進一步確認是哪一個

如果確定是擴充造成的，可以逐一停用來找出來源。先停用廣告阻擋類的，命中率最高。

網站端該注意什麼

知道擴充功能的影響之後，網站設計上可以避免一些問題：

• 重要功能不要依賴可能被擋掉的元素
• 不要用容易被誤判為廣告的命名
• 重要資訊不要只放在彈出視窗中
• 分析數據的落差要有心理準備

回報問題時要說明

如果向廠商回報網站問題，說明「已經用無痕視窗試過還是一樣」會很有幫助——這代表已經排除了擴充功能與快取的因素。

完整的回報要點見回報網站問題時該提供什麼資訊。

三個實用建議

1. 驗收網站時用無痕視窗——看到的才是一般訪客的樣子
2. 處理後台或財務用乾淨的瀏覽器
3. 每半年檢視一次已安裝的擴充，移除不用的

各瀏覽器的版本、介面與行為持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。

好的回報能省下大量時間

「網站怪怪的」這種回報，對方無從查起，只能來回詢問。

一次把資訊給足，通常能省下三到五輪的往返。

回報前先自己確認三件事

這一步能過濾掉大部分其實不是網站問題的情況：

1. 用無痕視窗開啟，還是一樣嗎？
2. 用手機的行動網路開啟，還是一樣嗎？
3. 請別人開一次，也看得到嗎？

三個都「是」，才需要回報。

詳細的排查見網站在我這邊有問題，別人卻正常。

該提供的七項資訊

截圖的重點

一定要含網址列

這是最常被漏掉的一項。 截圖只有內容區域，對方不知道是哪一頁。

不要只截取局部

問題可能與周圍的版面有關。截整個畫面比只截問題處更有用。

錯誤訊息要截清楚

如果畫面上有錯誤代碼或訊息，務必完整截下來——那通常直接指出了原因。

操作類的問題建議錄影

「按了沒反應」「跳出去了」這類問題，錄一段十秒的畫面比文字描述清楚得多。

手機與電腦都有內建的螢幕錄影功能。

重現步驟怎麼寫

用「第一步、第二步」的方式列出，讓對方能照著做一次。

範例

1. 進入產品列表頁
2. 點選第三項產品
3. 選擇規格「藍色 / M」
4. 按下「加入詢價車」
5. 畫面沒有反應，也沒有提示

關鍵是「對方照著做能不能重現」。 無法重現的問題最難處理。

裝置資訊怎麼提供

不需要很技術性，說明這些即可：

• 用什麼裝置——電腦、手機、平板
• 什麼系統——Windows、Mac、iPhone、Android
• 什麼瀏覽器——Chrome、Safari、Edge
• 是從哪裡點進去的——直接輸入網址、從搜尋結果、從通訊軟體

最後一項很重要。 從通訊軟體點進去開的是內建瀏覽器，行為可能不同。

見手機瀏覽器與電腦瀏覽器的差別。

一個可以直接使用的回報格式

【問題描述】
簡述發生什麼事

【網址】
完整的頁面網址

【重現步驟】
1.
2.
3.

【預期結果】
應該要怎樣

【實際結果】
實際發生什麼

【環境】
裝置：
系統：
瀏覽器：
從哪裡進入：

【影響範圍】
□ 只有我　□ 部分同事　□ 所有人　□ 不確定

【已嘗試】
□ 無痕視窗　□ 強制重新整理　□ 換瀏覽器　□ 換裝置／網路

【發生時間】
大約從什麼時候開始

【附件】
截圖或錄影

建議把這份格式存成範本，需要時填一填即可。

緊急程度要說明

幫助對方判斷處理順序：

不要每一件事都標為緊急——那會讓真正緊急的事失去優先度。

回報給誰

不同的問題可能要找不同的對象：

• 網站功能與顯示——網頁設計或維護廠商
• 網站完全打不開——先確認主機狀態，可能要找主機商
• 信件收發問題——郵件服務商或維護方
• 網域相關——網域註冊商

建議把各服務的聯絡方式整理成一份清單，與到期日一起管理。

見主機的日常維運與監控。

不建議的回報方式

• 只說「網站壞了」——沒有任何可查的線索
• 只傳一張沒有網址列的截圖
• 用電話口述複雜的操作步驟——容易失真，建議搭配書面
• 沒有先自行排除就回報——多數情況其實是本機問題
• 多個問題混在一起講——建議分開列，方便逐項確認

保留回報紀錄

建議用書面方式回報（電子郵件或工單），理由：

• 有紀錄可追溯
• 方便確認處理進度
• 相同問題再次發生時可以對照
• 屬於保固範圍的爭議時，有依據

保固與維護的界線見保固與維護有什麼不同。

各瀏覽器的版本、介面與行為持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。