帮助:移动优化：修订间差异

以互动方式浏览历史

←上一编辑

删除的内容添加的内容

可视化wikitext

行内

2026年5月21日 (四) 11:19的最新版本

本页说明如何提高页面在手机与平板端的可读性。

基本原则

优先保证内容不出现横向溢出。
长表格与长代码块要可滚动。
重要信息应在小屏首屏可见。

常见问题

宽表格撑破布局

可在容器中包裹表格：

<div style="overflow-x:auto;">
{| class="wikitable"
! 列 1 !! 列 2
|-
| 内容 || 内容
|}
</div>

代码块过宽

控制单行长度。
必要时分段展示。

图片过大

指定合理宽度（如 300px）。
为移动端重点页面避免超宽原图直接内联。

编辑检查清单

在移动端皮肤下预览一次。
确认无横向滚动条覆盖正文。
检查表格、图片、模板是否仍可读。

@@ 第1行： / 第1行： @@
-本指南介绍如何优化 MediaWiki 页面布局，特别是在移动设备上的显示效果。
+本页说明如何提高页面在手机与平板端的可读性。
-== 📏 宽度 vs 高度 ==
+== 基本原则 ==
+* 优先保证内容不出现横向溢出。
-网页布局通常涉及 '''宽度'' 和 '''高度''：
+* 长表格与长代码块要可滚动。
-* 当 '''高度'' 超出屏幕显示范围时，会出现 '''上下滚动条''，但这通常不影响阅读。
+* 重要信息应在小屏首屏可见。
-* 当 '''宽度'' 超出屏幕显示范围时，会出现 '''左右滚动条''，这会导致阅读困难，因为用户需要不断左右滑动才能阅读完整内容。
-由于现代网页主要采用 '''横向排版''，应尽量避免 '''页面元素超出屏幕宽度''，尤其是在移动设备上。
-== 📱 移动设备屏幕特性 ==
-移动设备屏幕宽度通常在 '''320px 至 414px'''之间（不考虑像素密度）。虽然手机物理分辨率越来越高，但网页显示仍受限于设备可视区域：
-*'' 桌面端 '''屏幕宽度一般不低于''1024px'''*'' 移动端 '''理想内容宽度应控制在''≤414px'''，避免横向滚动
-== 🎯 常见屏幕分辨率 ==
-MediaWiki 站点访问设备的典型分辨率分布：
-{| class="wikitable"
-|-
-! 设备类型 || 常见屏幕宽度
-|-
-| 桌面端 || ≥ 1024px
-|-
-| 平板设备 || 600px - 1024px
-|-
-| 手机端 || 320px - 414px
-|}
-== ✅ 移动端优化策略 ==
-=== 📊 表格响应式优化 ===
-表格是 MediaWiki 中常见元素，但容易导致移动端横向滚动。推荐使用响应式表格：
+== 常见问题 ==
+=== 宽表格撑破布局 ===
+可在容器中包裹表格：
 <syntaxhighlight lang="html">
-<div class="table-responsive">
+<div style="overflow-x:auto;">
 {| class="wikitable"
+! 列 1 !! 列 2
 |-
+| 内容 || 内容
-! 标题 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 > 标签
-|}
-== 🔚 总结 ==
+=== 图片过大 ===
+* 指定合理宽度（如 <code>300px</code>）。
-通过上述优化方法，可以显著改善 MediaWiki 页面在移动端的阅读体验：
+* 为移动端重点页面避免超宽原图直接内联。
-* 使用 '''响应式表格'' 和 '''自适应布局''
-* 合理配置 '''移动端皮肤''
-* 充分利用 '''预览和测试'' 工具
-* 遵循 MediaWiki 编辑最佳实践
+== 编辑检查清单 ==
-记住：在编辑过程中随时预览移动端效果，确保所有用户都能获得良好的阅读体验！
+* 在移动端皮肤下预览一次。
+* 确认无横向滚动条覆盖正文。
+* 检查表格、图片、模板是否仍可读。
-{{Template: 站点帮助文档}}
+{{Template:站点帮助文档}}
+[[Category:帮助文档]]

阅读	移动优化
编辑	维基化 · 快速指南 · 编辑页面 · 图片指南 · 编辑摘要 · 编辑冲突
高级编辑	站点分类 · 站点模板 · 模板编写指南 · 模板样式 · 解析函数
协作	历史与回退 · 保护页面
个人定制	定制消息 · Gadget
管理	学习指南 · 怎样的页面才会被计算为"文章页" · MediaWiki安装指南 · 扩展语法与格式示例