在近期的網站使用過程中，我們發現來自部分移動端瀏覽器（尤其是 夸克瀏覽器、UC 瀏覽器、百度 APP 內置瀏覽器、微信內置瀏覽器）的訪問量雖然不低，但這些瀏覽器在解析網頁腳本、CSS 動畫、內嵌組件等方面存在一定兼容性問題，導致頁面在這些環境中出現：
- 佈局錯亂
- 按鈕點擊無反應
- JS 邏輯異常
- 視頻、音頻組件無法正常加載
這些問題嚴重影響了用户體驗。經過多次調試和對比測試，我們最終決定對 不兼容的瀏覽器進行識別，並給出友好的彈窗提醒或跳轉提示頁，以引導用户使用更標準、兼容性更好的瀏覽器，例如 手機自帶瀏覽器或 Edge 瀏覽器。
一、問題出現的原因分析
由於部分國產瀏覽器對 Web 標準的支持不夠完整，或在系統內嵌中屏蔽了某些關鍵 API（例如微信屏蔽文件下載、百度 APP 限制外鏈等），網站在這些瀏覽器中運行時容易出現：
- 資源加載失敗
- DOM 或事件機制被限制
- JS 執行順序異常
- WebView 內核差異導致樣式渲染不一致
即使對前端代碼進行兼容性優化，也難以完全規避這些內核級別的限制。
因此，我們決定採用 前端 User-Agent 判斷 + 跳轉提示頁或彈窗提示 的方式，讓用户主動切換到更穩定的瀏覽器環境。
二、解決方案：使用 JS 判斷 UA 並提示用户更換瀏覽器
相比通過 nginx 層面判斷，前端 JS 方案具有更靈活、更易部署的優勢：
- 無需修改服務器配置，前端即可快速發佈
- 可自由定製彈窗樣式與行為
- 可根據業務需求選擇跳轉或僅彈窗提醒
核心思路是通過 navigator.userAgent 檢測訪問者的瀏覽器類型，並對不兼容瀏覽器執行跳轉或彈窗邏輯。
三、JS 代碼實現（跳轉或彈窗兩種方式）
1. 判斷 UA 的核心代碼
(function() {
var ua = navigator.userAgent || '';
// 不兼容瀏覽器關鍵詞
var isBadBrowser = /Quark|UCBrowser|UCWEB|baiduboxapp|baidu|MicroMessenger/i.test(ua);
// 是否為移動端（可選）
var isMobile = /Android|iPhone|iPad|iPod|Windows Phone/i.test(ua);
if (isMobile && isBadBrowser) {
// 跳轉到提示頁面
window.location.href = 'https://gptmirror.pftedu.com/browser_notice.html';
}
})();該腳本可放在網站的公共 JS 中，也可以直接寫入需要保護的頁面內。
四、提示頁面示例（browser_notice.html）
用户訪問後會自動展示彈窗提示，內容可按需求調整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀏覽器不兼容提示</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
alert('當前瀏覽器不兼容，請使用手機自帶瀏覽器或 Edge 瀏覽器訪問網站。');
};
</script>
</head>
<body style="text-align:center;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto">
<h2>瀏覽器不兼容</h2>
<p style="margin-top:20px;line-height:1.6;">
檢測到您正在使用：夸克 / UC / 百度APP / 微信內置瀏覽器。<br>
為了保證良好的訪問體驗，請使用：
</p>
<p style="margin-top:10px;font-weight:bold;">
手機自帶瀏覽器 或 Microsoft Edge 瀏覽器
</p>
</body>
</html>五、方案效果與優點
實測效果表明：
- 在夸克、UC、百度 APP、微信內置瀏覽器中均成功跳轉提示頁
- 彈窗提醒清晰明確，用户理解成本低
- 使用標準瀏覽器訪問則完全不影響正常使用
最終實現了：
✔ 避免瀏覽器兼容性差導致頁面異常
✔ 提高整體訪問穩定性與用户體驗
✔ 易於維護和擴展，可隨時增加或修改 UA 規則
六、總結
由於某些瀏覽器（尤其是 APP 內置 WebView）對 Web 標準的支持不足，我們的網站在這些環境下出現了功能和顯示問題。通過前端 JS 實現 指定 UA 自動跳轉並彈窗提示，成功解決了用户反饋的兼容性錯誤。
這是一種簡單、高效、可快速上線的瀏覽器兼容性解決方案。
