騰訊遊戲官網數據：1024×768 佔 20%、1920×1080 佔 14%，**寬度相差近一倍**。設計稿輸出 1920px，小解析度用戶只能看到中間區域或出現滾動條。需技術手段保證多數用戶看到一致效果。

一、PC 端：CSS 縮放自適應

案例 1：全頁縮放法

**原理**：按設計稿切出 1920×1000 頁面，JS 獲取視口寬度計算縮放比 `zoom = viewportWidth / 1920`，對根容器應用縮放。

// IE: zoom 屬性（同時縮放佔據文檔流空間）
// Firefox/Chrome: transform: scale() + transform-origin: 0 0
// WebKit 也支援 zoom，可統一用 zoom 或 scale 擇一

優點：實現簡單、完整保持設計稿視覺比例、無滾動條。缺點：文字可能過小、輸入框縮放後體驗下降、滑鼠座標需反算。

案例 2：固定主體 + 動態定位背景

主體固定尺寸居中，JS 計算背景圖定位與銜接，**人物/元素尺寸不變，僅背景延伸適配**。適合關鍵 UI 元素尺寸不可縮放的場景。

二、移動端：響應式與同頁適配

常規響應式

Media Queries + 百分比流式佈局（如 https://game.qq.com）。

動態定位適配

根據視口尺寸 JS 動態計算元素位置（如 https://up.qq.com/2014/await/）。

PC/手機共用頁面的「縮放大法」

專案時間緊、資源不足無法單獨做手機版時：

**直接套用 PC 端全頁縮放方案**，在手機視口下自動縮放為可瀏覽狀態。

同一套頁面，PC/安卓/iPhone 三端同步可用。**注意**：若頁面含 PC 專用組件（如複雜下拉選區、懸停交互），手機端會有操作槽點，需權衡取捨。

總結建議

1. **資源充足**：PC 做響應式/固定主體+動態背景；手機獨立頁面（響應式/動態定位）。
2. **資源受限/趕工期**：PC 頁面做全頁縮放自適應，同步覆蓋手機端，驗證核心流程可用即可上線。
3. **長期演進**：建立 Design System + 響應式組件庫，從源頭解決多端一致性與維護成本。