• 前綴兼容：部分 CSS3 屬性（如transform、border-radius）在不同瀏覽器中需要添加私有前綴才能生效。例如：

• 清除默認樣式：不同瀏覽器對標簽的默認樣式（如margin、padding、list-style）處理不同，需在 CSS 開頭添加 “重置樣式表”（Reset CSS）或 “_normalize.css”，統一基礎樣式。

• 避免高版本 CSS 特性：低版本瀏覽器（如 IE11）不支持flex、grid等現代布局方式，若需兼容，可使用float+position等傳統布局替代，或通過工具（如 PostCSS）將高版本 CSS 轉換為低版本兼容代碼。

• 語法兼容：ES6 + 語法（如箭頭函數=>、let/const）在低版本瀏覽器（如 IE11）中無法運行，需使用 Babel 將 ES6 + 代碼轉換為 ES5 語法，并通過core-js等庫補充缺失的 API（如Promise、Array.prototype.includes）。

• API 兼容：不同瀏覽器對 JavaScript API 的支持不同，例如addEventListener在 IE8 及以下需用attachEvent替代。可使用工具庫（如 jQuery、lodash）封裝 API，屏蔽瀏覽器差異。例如：

• 避免使用私有 API：如 Chrome 的chrome.*系列 API、Safari 的webkitRequestFullScreen，僅在特定瀏覽器中生效，需通過特征檢測判斷是否支持，不支持時提供降級方案。

• 使用相對單位：用rem、em、%替代px作為尺寸單位，確保元素大小隨屏幕尺寸自適應。例如，將根元素html的font-size設為100px，則1rem = 100px，在不同屏幕下通過媒體查詢調整font-size，實現整體縮放。

• 媒體查詢斷點設計：根據主流設備尺寸設置斷點（如@media (max-width: 768px)），在不同斷點下調整布局。

• 圖片適配：使用srcset和sizes屬性為不同屏幕提供不同分辨率的圖片，避免小屏幕加載過大圖片（浪費流量）或大屏幕顯示模糊圖片。

• 兼顧觸摸和鼠標事件：移動端以觸摸事件（touchstart、touchend）為主，桌面端以鼠標事件（mousedown、mouseup）為主，需同時監聽兩類事件，避免功能在某類設備上失效。

• 防止觸摸事件冒泡：移動端觸摸事件可能觸發默認行為（如頁面滾動），需通過event.preventDefault()阻止，但需謹慎使用，避免影響正常交互（如輸入框無法聚焦）。

網站開發

• 跨平臺字體選擇：不同系統默認字體不同（Windows 用 “微軟雅黑”，macOS 用 “蘋方”），可通過font-family設置字體棧成都思樂，優先使用系統默認字體，確保文字清晰。例如：

• 避免文字模糊：在高分辨率屏幕（如 Retina 屏）上，文字可能因像素不足而模糊，需確保字體文件包含足夠的細節，或使用text-shadow輕微優化顯示效果。

• 地理位置、攝像頭等權限：不同系統對瀏覽器調用硬件權限的限制不同（如 iOS Safari 需用戶手動授權地理位置，Android Chrome 可能默認拒絕）。調用前需檢查權限狀態，未授權時提示用戶開啟，并提供替代方案（如手動輸入地址）。

• 文件上傳差異：iOS 系統限制input[type="file"]只能選擇圖片和視頻，Android 支持更多文件類型，需在代碼中說明限制，避免用戶困惑。

• 真實設備測試：準備主流設備（如 iPhone 14、華為 Mate 50、iPad Pro）和瀏覽器（Chrome、Safari、Edge、微信瀏覽器），覆蓋不同系統和版本。

• 模擬器輔助：使用工具（如 Chrome DevTools、Safari 模擬器、BrowserStack）模擬不同設備和瀏覽器環境扁平化網站，快速排查問題。

• 兼容性檢測工具：通過 Can I use（caniuse.com）查詢 CSS/JS 特性在不同瀏覽器的支持情況，提前規避不兼容特性。

• 自動化測試框架：使用 Selenium、Cypress 等工具編寫測試用例，在多瀏覽器環境下自動執行，檢測功能是否正常。