檢視Help:移动优化的原始碼

本指南介绍如何优化 MediaWiki 页面布局，特别是在移动设备上的显示效果。

== 📏 宽度 vs 高度 ==
网页布局通常涉及 ''' 宽度 ''' 和 ''' 高度 '''：
* 当 ''' 高度 ''' 超出屏幕显示范围时，会出现 ''' 上下滚动条 '''，但这通常不影响阅读。
* 当 ''' 宽度 ''' 超出屏幕显示范围时，会出现 ''' 左右滚动条 '''，这会导致阅读困难，因为用户需要不断左右滑动才能阅读完整内容。

由于现代网页主要采用 ''' 横向排版 '''，应尽量避免 ''' 页面元素超出屏幕宽度 '''，尤其是在移动设备上。

== 📱 移动设备屏幕特性 ==
移动设备屏幕宽度通常在 '''320px 至 414px''' 之间（不考虑像素密度）。虽然手机物理分辨率越来越高，但网页显示仍受限于设备可视区域：
* ''' 桌面端 ''' 屏幕宽度一般不低于 '''1024px'''
* ''' 移动端 ''' 理想内容宽度应控制在 '''≤414px'''，避免横向滚动

== 🎯 常见屏幕分辨率 ==
MediaWiki 站点访问设备的典型分辨率分布：
{| class="wikitable"
|-
! 设备类型 || 常见屏幕宽度
|-
| 桌面端 || ≥ 1024px
|-
| 平板设备 || 600px - 1024px  
|-
| 手机端 || 320px - 414px
|}

== ✅ 移动端优化策略 ==

=== 📊 表格响应式优化 ===
表格是 MediaWiki 中常见元素，但容易导致移动端横向滚动。推荐使用响应式表格：

<syntaxhighlight lang="html">
<div class="table-responsive">
{| class="wikitable"
|-
! 标题 1
! 标题 2
|-
| 内容 1
| 内容 2
|}
</div>
</syntaxhighlight>

或者使用 CSS 实现：
<syntaxhighlight lang="css">
.mw-responsive-table {
  width: 100%;
  overflow-x: auto;
  display: block;
}
</syntaxhighlight>

🔹 ''' 效果 '''：桌面端保持原宽度，移动端变为可横向滚动，不撑破页面布局。

=== 📐 自适应元素设计 ===
对于图片、容器等定宽元素，使用 MediaWiki 的 CSS 类实现自适应：

<syntaxhighlight lang="html">
<div class="mw-mobile-responsive" style="max-width: 600px; margin: 0 auto;">
[[File: 示例图片.jpg|alt = 示例 | 600px]]
</div>
</syntaxhighlight>

🔹 ''' 效果 '''：
* ''' 桌面端 '''：保持 600px 宽度
* ''' 移动端 '''：自动调整为 100% 宽度

=== 🎨 使用多列模板 ===
MediaWiki 的 Columns 模板可以帮助创建响应式多列布局：

<syntaxhighlight lang="wikitext">
{{Columns
|count=2
|width=300px
|gap=1em
|
* [[页面 1]]
* [[页面 2]] 
* [[页面 3]]
* [[页面 4]]
}}
</syntaxhighlight>

=== ✏️ 编辑最佳实践 ===
* 编辑时使用 ''' 显示预览 ''' 功能检查效果
* 在 ''' 编辑摘要 ''' 中简要描述修改内容
* 使用 ''' 显示更改 ''' 对比版本差异

=== 📱 移动端皮肤配置 ===
在 <code>LocalSettings.php</code > 中设置移动端皮肤：
<syntaxhighlight lang="php">
$wgDefaultMobileSkin = 'minerva';
$wgMFEnableDesktopResources = true;
</syntaxhighlight>

=== 🧪 移动端效果测试 ===
在桌面浏览器中测试移动端显示：
# 右键点击页面，选择 ''' 审查元素 '''
# 点击 ''' 设备模拟 ''' 图标（手机 / 平板）
# 选择不同设备分辨率测试显示效果

== 🔧 高级布局调整 ==

=== 页面宽度全局调整 ===
通过修改 MediaWiki 皮肤 CSS 调整整体宽度：
<syntaxhighlight lang="css">
/* 在 MediaWiki:Common.css 中添加 */
#globalWrapper {
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #globalWrapper {
    max-width: 100%;
    padding: 0 10px;
  }
}
</syntaxhighlight>

=== 图片响应式处理 ===
<syntaxhighlight lang="wikitext">
[[File: 示例.jpg|frameless|600px|class=responsive-img|alt = 替代文本]]
</syntaxhighlight>

== ❗ 常见问题与解决 ==

{| class="wikitable"
|-
! 问题
! 解决方案
|-
| 表格横向滚动
| 添加 <code>class="table-responsive"</code>
|-
| 图片超出边界
| 设置 <code>max-width: 100%</code>
|-
| 代码块溢出
| 使用 <code><syntaxhighlight></code > 标签
|}

== 🔚 总结 ==
通过上述优化方法，可以显著改善 MediaWiki 页面在移动端的阅读体验：
* 使用 ''' 响应式表格 ''' 和 ''' 自适应布局 '''
* 合理配置 ''' 移动端皮肤 '''
* 充分利用 ''' 预览和测试 ''' 工具
* 遵循 MediaWiki 编辑最佳实践

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

{{Template: 站点帮助文档}}