瀏覽器與相容性

B2B 網站最容易踩到的情境

你的網站在自己公司、在手機上都正常，但客戶說在他們公司打不開，或某些功能不能用。

這在 B2B 尤其常見——企業內部網路的限制比一般家用網路多得多，而且你完全無法控制對方的環境。

企業網路常見的五種限制

一、網址過濾

公司可能封鎖特定類別的網站，或只允許白名單內的網址。

誤判的情況不少見——新註冊的網域、流量少的網站、或分類資料庫尚未收錄的站台，可能被歸類為未知而被擋。

二、封鎖外部資源

網站可能引用了外部的服務——網頁字型、地圖、影片、分析工具、社群外掛。

如果那些外部網域被封鎖，網頁會載入不完整：

• 字型變成系統預設，版面可能跑掉
• 地圖區塊空白
• 影片無法播放
• 某些互動功能失效

這是最常見的原因。 網站本身沒問題，只是某個外部資源被擋了。

三、內容檢查造成的憑證提示

部分企業網路會檢查加密連線的內容，這可能觸發瀏覽器的憑證相關提示。

見瀏覽器的安全提示是什麼意思。

四、檔案下載限制

某些檔案類型可能被禁止下載——壓縮檔、可執行檔，甚至部分文件格式。

五、瀏覽器版本被鎖定

企業可能統一管理瀏覽器版本，員工用的可能比一般人舊。

怎麼判斷是不是這一類問題

請對方協助確認：

1. 用手機的行動網路開啟——不要連公司 Wi-Fi
2. 如果手機正常，就是公司網路的限制
3. 如果手機也不行，才是網站的問題

這一步能立刻分辨責任歸屬，避免雙方各自猜測。

減少外部依賴的設計原則

既然無法控制對方的網路，合理的做法是減少對外部資源的依賴。

建議

• 字型盡量自行代管，或設定合理的替代字型
• 核心內容不要依賴外部服務——地址用文字寫清楚，不要只放地圖
• 聯絡方式用文字呈現，不要只做在圖片或外部元件中
• 表單自行處理，不依賴第三方嵌入
• 外部資源載入失敗時，版面不應崩壞

一個實務判斷

問自己：如果這個外部服務今天完全連不上，網站還能用嗎？

如果答案是「不能」，那就是過度依賴。

字型的替代設定

這是最常見也最容易處理的一項。

如果網頁字型載入失敗，瀏覽器會回退到替代字型。如果沒有設定合理的替代方案，可能變成很不搭的預設字體，甚至造成版面跑掉。

建議在發包時確認：字型載入失敗時的呈現是否可接受。

見網頁字型怎麼選。

如果客戶反映打不開，怎麼回應

建議的處理順序：

1. 請對方用手機行動網路試一次——先分辨是哪一端
2. 如果是公司網路的限制，請對方詢問資訊人員
3. 提供你的網域讓對方加入白名單
4. 提供替代的聯絡方式——電話、Email，不要讓生意卡在這裡

第四項最實際

不要為了解決一個客戶的網路限制而大改網站。 直接給電話或 Email 完成這筆生意，同時把問題記錄下來觀察是否為普遍現象。

什麼時候該真的處理

被安全軟體誤判怎麼辦

如果多個對象都反映網站被安全軟體攔截，可能是：

• 網站曾被入侵並植入惡意內容——即使已清除，紀錄可能還在
• 共用主機上的其他網站有問題
• 新網域尚未建立信譽
• 單純的誤判

處理方向

1. 先確認網站本身確實乾淨——查看搜尋主控台的安全性通知
2. 向該安全服務提出重新審查
3. 如果是共用主機的鄰居問題，考慮更換主機

入侵的判斷見怎麼知道網站被入侵了。

寄信也可能遇到同樣問題

企業的郵件過濾也可能擋掉你的信。如果客戶說「沒收到報價單」，可能是被擋了。

處理方式：完成寄件驗證的設定，並在重要信件寄出後主動確認對方收到。

見郵件的 DNS 設定。

發包時可以提出的需求

1. 外部資源載入失敗時，版面不會崩壞
2. 核心資訊（聯絡方式、地址、營業時間）以文字呈現
3. 字型有合理的替代設定
4. 不依賴彈出視窗完成關鍵操作

這幾項成本不高，但能讓網站在受限環境下仍然可用。

各瀏覽器與企業環境的設定差異很大，本文說明的是原則與判斷方向。實際的處理方式建議與對方的資訊人員或維護廠商確認。

這是一個成本問題，不是技術問題

「要不要支援舊裝置」聽起來是技術決定，實際上是預算分配的決定。

因為支援越舊的環境，需要的開發與測試工時越多——而那些工時可以用在別的地方。

成本從哪裡來

一、不能使用較新的技術

網頁技術持續發展，較新的做法通常更簡潔、效能更好。要支援舊環境，就得改用較繁瑣的替代方案。

同樣的功能，可能要多寫好幾倍的程式碼。

二、測試工時倍增

每多一個要支援的環境，所有功能都要多測一輪。

如果測試組合從三種變成八種，測試時間就是接近三倍。

三、維護成本持續累積

日後每次改版、新增功能，都要重新確認舊環境仍然正常。這是持續性的成本，不是一次性的。

四、可能需要準備替代方案

某些功能在舊環境根本做不到，可能要準備簡化版本——等於同一件事做兩次。

先看數據再決定

不要憑印象判斷。 打開分析工具，看實際的訪客用什麼。

該看的三個維度

• 瀏覽器與版本的分布
• 作業系統與版本
• 螢幕尺寸的分布

更重要的是：交叉看轉換

不只看「有多少人用舊環境」，還要看「那些人有沒有帶來生意」。

如果某個舊環境佔了 2% 的流量，但從來沒有帶來詢問，那它的商業價值接近零。

反過來，如果某個大客戶剛好用舊環境，那 0.1% 的流量可能比其他 99% 都重要。

數據判讀見流量分析基本上要看什麼。

三種處理策略

推薦：漸進增強

這是多數情況最合理的選擇。核心的事情所有人都能完成——瀏覽內容、看到聯絡方式、送出表單；進階的視覺效果只在支援的環境呈現。

舊環境的使用者不會被擋在門外，只是看到的版本較單純。

提示升級的做法

對已經終止官方支援的環境，顯示一則友善的提示，說明建議升級。

這是合理的——終止支援的環境本身有安全風險，建議升級是對使用者好。

不是所有功能都要一視同仁

建議把功能分級：

• 必須所有環境都能用——閱讀內容、聯絡方式、表單送出、電話撥打
• 可以退化的——動畫、視差效果、圓角陰影、進階排版
• 可以只在新環境提供的——複雜的互動工具、線上試算

把預算集中在第一類，第二類自然退化，第三類明確標示需求。

特殊情況：政府或大型企業客戶

如果主要客戶是這類組織，情況會不同：

• 他們的電腦環境可能統一管理且較舊
• 可能有明文的相容性要求
• 採購文件中可能載明支援範圍

建議

直接詢問對方的環境要求，並把它寫進網站的規格中。這比事後補救便宜得多。

舊裝置的另一個面向：效能

這一點常被忽略。舊裝置不只是「支援與否」的問題，還有「跑不跑得動」的問題。

較舊的手機處理效能較差，遇到：

• 大量的動畫效果
• 未壓縮的大圖
• 複雜的互動

可能會卡頓、發熱、甚至崩潰。

務實的做法

把網站做輕，比支援更多舊環境更有效。

壓縮圖片、減少不必要的效果——這同時讓新舊裝置都更順暢，而且成本很低。

見網站慢的常見原因與優先處理順序。

寫進合約的建議

1. 明確列出支援的環境範圍
2. 說明採用漸進增強的策略——並定義哪些是核心功能
3. 範圍外的環境如何處理——顯示提示或不保證
4. 日後環境改版造成的問題，屬於維護範疇

第四項要特別談清楚，見保固與維護有什麼不同。

一個成本的實際比較

假設要多支援一組舊環境，需要額外的開發與測試工時。同樣的預算可以用來做什麼？

• 把所有圖片最佳化，讓網站對所有人都更快
• 改善手機版的表單流程，提高詢問轉換率
• 寫十篇客戶會搜尋的內容

這樣比較之後，決定通常會很清楚。

結論

合理的原則是：

• 核心功能所有人都能用
• 視覺效果依環境自然退化
• 已終止支援的環境提示升級即可
• 依實際數據決定，並每年檢視一次

各瀏覽器與企業環境的設定差異很大，本文說明的是原則與判斷方向。實際的處理方式建議與對方的資訊人員或維護廠商確認。

不只是「手機版」與「電腦版」

很多人以為網站只要準備兩種版面就夠了，但實際的螢幕尺寸是連續的光譜。

常見的範圍包含：小尺寸手機、大尺寸手機、摺疊裝置、直式與橫式平板、筆電、桌上型螢幕、超寬螢幕。

好的設計應該在任何寬度下都合理，而不只是在幾個特定尺寸下好看。

幾個容易被忽略的情境

一、小尺寸手機

市面上仍有螢幕較窄的機型。常見問題是表格撐破畫面、按鈕文字被擠壓換行、價格數字被切斷。

測試時建議把瀏覽器視窗縮到很窄，看版面是否仍然合理。

二、手機橫放

使用者可能把手機轉成橫向瀏覽，此時：

• 可見高度變得很矮
• 固定在畫面上下的元素可能佔掉大半空間
• 需要捲動的距離變長

如果網站有全螢幕的區塊設計，橫放時可能完全看不到內容。

三、平板的尷尬區間

平板的寬度介於手機與電腦之間，常常落在版面切換的邊界附近。

常見問題：套用了電腦版的版面但空間不足，或套用手機版而顯得過於空曠。

直式與橫式平板的差異也很大，建議兩種都測。

四、摺疊裝置

摺疊機在展開與收合時寬度差異很大，而且可能在使用中途改變。

設計上不需要特別針對，但版面應該能平順地適應寬度變化，而不是在某個寬度突然崩壞。

五、超寬螢幕

大尺寸或超寬螢幕上，如果內容沒有設定最大寬度：

• 文字會被拉得很長，一行超過舒適的閱讀長度
• 版面顯得空洞
• 圖片被過度放大而模糊

建議為內容設定合理的最大寬度，超過時置中留白，而不是無限延展。

閱讀長度的原則

一行文字太長時，眼睛回到下一行的起點會變困難，閱讀效率下降。

建議為文字內容設定最大寬度，這比讓它佔滿整個螢幕更好讀。

這也是為什麼許多網站在大螢幕上，內容區塊是置中而非滿版的。

測試的實務方法

方法一：緩慢拖曳視窗寬度

把瀏覽器視窗從最寬慢慢拖到最窄，觀察版面的變化過程。

要注意的是：

• 有沒有某個寬度突然破版
• 切換版面時是否平順
• 有沒有文字重疊或超出
• 圖片會不會變形

這是最快也最有效的檢查方式，比逐一測試特定尺寸更容易發現問題。

方法二：實機測試

用實際的手機與平板操作。模擬看不出觸控手感、鍵盤彈出的影響、實際的載入速度。

方法三：檢查邊界值

版面切換的臨界寬度附近最容易出問題。請廠商說明版面在哪些寬度切換，然後在那些寬度附近多測幾次。

斷點的說明見斷點與設計稿的檢視。

表格是最常出問題的元素

規格表、比較表、價目表在窄螢幕上特別容易出問題。

常見的處理方式

• 允許水平捲動——最簡單，但要有明顯的提示讓使用者知道可以滑
• 轉換為卡片式呈現——每一列變成一張卡片
• 隱藏次要欄位——只顯示關鍵資訊，可展開看完整內容

不建議的做法是讓表格直接撐破畫面——那會讓整個頁面都能左右滑動，體驗很差。

圖片在不同尺寸下的處理

• 不要用大圖直接縮小顯示——浪費頻寬，手機使用者尤其吃虧
• 重要內容不要放在圖片邊緣——不同比例下可能被裁切
• 文字不要做在圖片上——縮小後會看不清楚

見圖片尺寸與壓縮。

該測到什麼程度

務實的建議：

依實際數據調整

分析工具可以看到訪客的螢幕尺寸分布。看自己網站的數據，比通用建議準確。

驗收時的檢查清單

1. 從最寬拖到最窄，過程中沒有破版
2. 小尺寸手機上，表格與價格不會被切斷
3. 大螢幕上，文字不會被拉得過長
4. 圖片在各尺寸下都不變形
5. 手機橫放時仍能正常使用
6. 平板上的版面合理，不會過於空曠或擁擠

第一項最有效率——一次拖曳就能發現大部分問題。

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

各瀏覽器與企業環境的設定差異很大，本文說明的是原則與判斷方向。實際的處理方式建議與對方的資訊人員或維護廠商確認。

還是有人會列印網頁

雖然多數瀏覽是在螢幕上，但某些情境下使用者確實會列印：

• 產品規格表——帶到現場對照
• 報價或方案說明——給主管簽核
• 活動資訊——貼在公布欄
• 訂單或預約確認
• 交通資訊與地址
• 技術文件與操作說明

B2B 網站特別常遇到這個需求——採購流程中常需要紙本存查。

不處理會發生什麼

直接列印未經處理的網頁，常見的問題：

• 選單、側邊欄、頁尾佔掉大量版面
• 深色背景把碳粉或墨水用光
• 內容被切斷——表格或圖片剛好跨頁
• 連結顯示為藍色底線文字，但看不到網址
• 浮動的元素蓋住內容
• 印出好幾頁，但有用的內容只有半頁

最實際的損失是：客戶把你的規格表印出來給主管看，結果印出來的東西很難閱讀。

列印樣式做什麼

網頁可以針對列印設定一套獨立的樣式，常見的處理：

最有價值的一項

在列印版本中加入公司名稱、電話與網址。

因為列印出來的紙張會被傳閱、被存查、被帶到會議上。如果上面沒有你的聯絡方式，那個曝光機會就浪費了。

連結的處理

紙上看不到超連結的目標。可以設定讓列印時在連結文字後面顯示實際網址。

但要注意：

• 只對重要的連結這樣做——全部都加會很雜亂
• 選單類的連結應該直接隱藏
• 網址太長時可能造成排版問題

分頁的控制

可以設定避免在不恰當的地方分頁：

• 標題不要單獨留在頁尾
• 表格盡量不要跨頁切斷，若必須跨頁，讓標題列在每頁重複
• 圖片與說明文字不要分開

這些細節讓印出來的文件更專業。

哪些頁面值得做

不必全站都處理。依實際會被列印的頁面判斷：

成本很低

基本的列印樣式通常只需要少量工時——隱藏不必要的元素、改為白底、加上聯絡資訊。

相對於它帶來的專業感，投報率不錯。

提供 PDF 是另一種做法

對於規格表、型錄、報價這類文件，直接提供 PDF 下載可能比讓使用者列印網頁更好。

PDF 的優點

• 版面完全可控
• 可以做成正式的文件格式
• 方便轉寄與存檔
• 可以放上完整的公司資訊與圖說

PDF 的缺點

• 更新時要重新製作——容易與網頁版本不一致
• 檔案較大
• 手機上閱讀體驗較差
• 內容不易被搜尋引擎完整利用

建議的組合

網頁版作為主要內容（能被搜尋到），同時提供 PDF 下載或良好的列印樣式。

不要只提供 PDF——那等於把內容藏起來了。

如果有系統自動產生的文件

訂單確認、預約憑證、報價單這類由系統產生的文件，建議：

• 直接產生 PDF，版面較可控
• 包含完整的公司資訊
• 包含訂單或預約編號
• 考慮加上聯絡窗口

測試的方式

不需要真的印出來，用瀏覽器的列印預覽即可看到結果。

檢查項目

1. 選單與側邊欄是否已隱藏
2. 內容是否展開為滿版
3. 背景是否為白底
4. 有沒有公司名稱與聯絡方式
5. 總共幾頁？有沒有無謂的空白頁
6. 表格與圖片有沒有被不當切斷

第五項值得注意——常見的情況是印出五頁，但實際內容只有一頁半。

發包時可以提出的需求

如果你的產業確實會用到列印，建議在規格中列出：

• 指定哪些頁面需要列印樣式
• 列印時應隱藏與保留的元素
• 列印版本要包含公司資訊
• 是否需要提供 PDF 下載

這是很少被提出但成本不高的需求，對 B2B 網站尤其實用。

各瀏覽器與企業環境的設定差異很大，本文說明的是原則與判斷方向。實際的處理方式建議與對方的資訊人員或維護廠商確認。