說明:移動優化
本指南介紹如何優化 MediaWiki 頁面布局，特別是在移動設備上的顯示效果。
📏 寬度 vs 高度
網頁布局通常涉及 寬度 和 高度 ：
- 當 高度 超出屏幕顯示範圍時，會出現 上下滾動條 ，但這通常不影響閱讀。
- 當 寬度 超出屏幕顯示範圍時，會出現 左右滾動條 ，這會導致閱讀困難，因為用戶需要不斷左右滑動才能閱讀完整內容。
由於現代網頁主要採用 橫向排版 ，應儘量避免 頁面元素超出屏幕寬度 ，尤其是在移動設備上。
📱 移動設備屏幕特性
移動設備屏幕寬度通常在 320px 至 414px 之間（不考慮像素密度）。雖然手機物理分辨率越來越高，但網頁顯示仍受限於設備可視區域：
- 桌面端 屏幕寬度一般不低於 1024px
- 移動端 理想內容寬度應控制在 ≤414px，避免橫向滾動
🎯 常見屏幕分辨率
MediaWiki 站點訪問設備的典型分辨率分布：
| 設備類型 | 常見屏幕寬度 |
|---|---|
| 桌面端 | ≥ 1024px |
| 平板設備 | 600px - 1024px |
| 手機端 | 320px - 414px |
✅ 移動端優化策略
📊 表格響應式優化
表格是 MediaWiki 中常見元素，但容易導致移動端橫向滾動。推薦使用響應式表格：
<div class="table-responsive">
{| class="wikitable"
|-
! 标题 1
! 标题 2
|-
| 内容 1
| 内容 2
|}
</div>
或者使用 CSS 實現：
.mw-responsive-table {
width: 100%;
overflow-x: auto;
display: block;
}
🔹 效果 ：桌面端保持原寬度，移動端變為可橫向滾動，不撐破頁面布局。
📐 自適應元素設計
對於圖片、容器等定寬元素，使用 MediaWiki 的 CSS 類實現自適應：
<div class="mw-mobile-responsive" style="max-width: 600px; margin: 0 auto;">
[[File: 示例图片.jpg|alt = 示例 | 600px]]
</div>
🔹 效果 ：
- 桌面端 ：保持 600px 寬度
- 移動端 ：自動調整為 100% 寬度
🎨 使用多列模板
MediaWiki 的 Columns 模板可以幫助創建響應式多列布局：
{{Columns
|count=2
|width=300px
|gap=1em
|
* [[页面 1]]
* [[页面 2]]
* [[页面 3]]
* [[页面 4]]
}}
✏️ 編輯最佳實踐
- 編輯時使用 顯示預覽 功能檢查效果
- 在 編輯摘要 中簡要描述修改內容
- 使用 顯示更改 對比版本差異
📱 移動端皮膚配置
在 LocalSettings.php 中設置移動端皮膚：
$wgDefaultMobileSkin = 'minerva';
$wgMFEnableDesktopResources = true;
🧪 移動端效果測試
在桌面瀏覽器中測試移動端顯示：
- 右鍵點擊頁面，選擇 審查元素
- 點擊 設備模擬 圖標（手機 / 平板）
- 選擇不同設備分辨率測試顯示效果
🔧 高級布局調整
頁面寬度全局調整
通過修改 MediaWiki 皮膚 CSS 調整整體寬度：
/* 在 MediaWiki:Common.css 中添加 */
#globalWrapper {
max-width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#globalWrapper {
max-width: 100%;
padding: 0 10px;
}
}
圖片響應式處理
[[File: 示例.jpg|frameless|600px|class=responsive-img|alt = 替代文本]]
❗ 常見問題與解決
| 問題 | 解決方案 |
|---|---|
| 表格橫向滾動 | 添加 class="table-responsive"
|
| 圖片超出邊界 | 設置 max-width: 100%
|
| 代碼塊溢出 | 使用 <syntaxhighlight> 標籤
|
🔚 總結
通過上述優化方法，可以顯著改善 MediaWiki 頁面在移動端的閱讀體驗：
- 使用 響應式表格 和 自適應布局
- 合理配置 移動端皮膚
- 充分利用 預覽和測試 工具
- 遵循 MediaWiki 編輯最佳實踐
記住：在編輯過程中隨時預覽移動端效果，確保所有用戶都能獲得良好的閱讀體驗！