移動端尺寸多種多樣，很難窮盡所有可能性，因為廠商不斷推出新的裝置。最好根據你的目標使用者和統計資料來確定你需要支援的尺寸。
不過，我可以提供一些通用的指導和常見尺寸：
思考維度：
- 螢幕尺寸 (英寸): 指的是螢幕對角線的長度。這通常用於營銷和裝置比較，但對前端開發來說用處不大。
- 解析度 (畫素): 指的是螢幕水平和垂直方向上的畫素數量，例如 1920x1080。這是前端開發中最關鍵的指標。
- 畫素密度 (PPI/DPI): 每英寸的畫素數量。更高的PPI意味著更清晰的影像。這會影響影像資源的選擇。
- 螢幕方向: 橫屏 (landscape) 或豎屏 (portrait)。
- 裝置型別: 手機、平板電腦、摺疊屏手機等。
- 作業系統: iOS, Android, 以及版本差異。
常見移動裝置解析度 (示例，非窮盡):
- 小屏手機: 320x480, 375x667, 390x844
- 中等尺寸手機: 414x896, 412x732
- 大屏手機: 393x851, 428x926
- 平板電腦: 768x1024, 800x1280, 1024x1366, 以及更高解析度
摺疊屏手機: 由於摺疊屏手機的特殊性，它們會有多種解析度和寬高比，需要特別處理。
最佳實踐:
- 響應式設計: 使用CSS媒體查詢 (
@media) 來根據不同的螢幕尺寸調整佈局和樣式。 - 移動優先: 先設計移動端版本，再逐步適配更大的螢幕。
- 使用視口元標籤 (viewport meta tag): 確保網頁在不同裝置上正確縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 測試: 在各種真實裝置和模擬器上測試你的網頁，以確保相容性和最佳使用者體驗。
- 關注裝置畫素比 (DPR): 使用合適的影像資源以避免在高解析度螢幕上出現模糊。
- 使用瀏覽器開發者工具: 模擬不同裝置的尺寸和解析度進行除錯。
獲取裝置資訊: JavaScript 可以獲取一些裝置資訊，例如螢幕寬度和高度，但不能完全依賴這些資訊，因為使用者可以縮放頁面。
總結: 不要試圖精確適配每一個尺寸，而是專注於建立靈活的、響應式的設計，以適應各種螢幕尺寸和裝置。 持續關注市場上的新裝置和解析度趨勢，並定期測試你的網站，以確保最佳使用者體驗。