帮助:移动优化

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

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