帮助:移动优化

本指南介绍如何优化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编辑最佳实践

记住：在编辑过程中随时预览移动端效果，确保所有用户都能获得良好的阅读体验！