說明:移動優化
本指南介紹如何優化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;
🧪 移動端效果測試
在桌面瀏覽器中測試移動端顯示： 1. 右鍵點擊頁面，選擇審查元素 2. 點擊設備模擬圖標（手機/平板） 3. 選擇不同設備分辨率測試顯示效果
🔧 高級布局調整
頁面寬度全局調整
通過修改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編輯最佳實踐
記住：在編輯過程中隨時預覽移動端效果，確保所有用戶都能獲得良好的閱讀體驗！