帮助:移动优化
来自陋室
更多操作
本指南介绍如何优化 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 编辑最佳实践
记住：在编辑过程中随时预览移动端效果，确保所有用户都能获得良好的阅读体验！