說明:移動優化
📏 寬度 vs 高度
網頁的布局通常涉及 寬度 和 高度：
- 當 高度 超出屏幕可顯示範圍時，會出現 上下滾動條，但這不會對閱讀體驗造成太大影響。
- 當 寬度 超出屏幕可顯示範圍時，會出現 左右滾動條，這會導致閱讀困難。📜 因為用戶需要不斷左右滑動，才能閱讀完整的內容。
由於現代網頁主要採用 橫向排版，我們應儘量避免 頁面元素超出屏幕寬度，否則會嚴重影響移動端用戶的閱讀體驗。
📱 流動裝置的屏幕寬度
流動裝置的屏幕寬度通常在 320px 至 414px 之間（不考慮像素密度 dpi）。雖然手機屏幕的物理解像度越來越高，但網頁的實際顯示尺寸仍然受限於設備的可視區域。因此：
- 桌面端 屏幕寬度一般不會低於 1024px。
- 移動端 適合的內容寬度應控制在 ≤ 300px，否則可能會導致 橫向滾動。
🎯 訪問 MediaWiki 站點的常見屏幕解像度
在 MediaWiki 站點中，常見的屏幕解像度分布如下：
| 設備類型 | 常見屏幕寬度 |
|---|---|
| 桌面端 | ≥ 1024px |
| 平板設備 | 600px - 1024px |
| 手機端 | 320px - 414px |
✅ 如何優化頁面以適應移動端
為了改善移動端的閱讀體驗，我們可以採取以下優化策略：
📊 表格優化
表格是 MediaWiki 頁面中常見的排版方式，但很多表格的默認寬度會超過移動端屏幕。為了避免 橫向滾動，我們可以使用 .table-responsive 進行優化：
<div class="table-responsive">
<table style="width:800px;background-color:black">
<tr><td>示例表格</td></tr>
</table>
</div>
🔹 效果： 該表格在桌面端仍然使用 800px 寬度，但在手機端會變成 可橫向拖動，避免撐開整個頁面。
📐 讓定寬元素自適應屏幕
某些定寬塊狀元素（如圖片、容器等），可以使用 .full-width-xs 讓它們在移動端自適應屏幕寬度：
<div class="full-width-xs" style="width:600px;height:400px;background-color:black">
</div>
🔹 效果：
- 桌面端 仍然保持 600px 寬度。
- 移動端 寬度會自動調整為 100%，適應屏幕尺寸。
🧐 預覽移動端效果
在優化移動端頁面時，我們可以在桌面瀏覽器中模擬流動裝置的效果。例如，在 Chrome 瀏覽器 中：
- 右鍵點擊頁面，選擇 審查元素（Inspect） 🔍。
- 點擊 流動裝置預覽 📱（通常是一個手機/平板的圖標）。
- 在頂部工具欄中，選擇不同的設備解像度，查看頁面在移動端的顯示效果。
🔚 結語
通過上述優化方法，我們可以 減少橫向滾動，讓 MediaWiki 頁面在 移動端更易閱讀 🎉。建議在編輯頁面時，提前 預覽移動端效果，確保布局適配不同設備，讓用戶享受更佳的閱讀體驗！🚀