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

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

可视化wikitext

行内

@@ 第1行： / 第1行： @@
+本指南介绍如何优化MediaWiki页面布局，特别是在移动设备上的显示效果。
 == 📏 宽度 vs 高度 ==
-网页的布局通常涉及 '''宽度''' 和 '''高度'''：
+网页布局通常涉及'''宽度'''和'''高度'''：
-* 当 '''高度''' 超出屏幕可显示范围时，会出现 '''上下滚动条'''，但这不会对阅读体验造成太大影响。
+* 当'''高度'''超出屏幕显示范围时，会出现'''上下滚动条'''，但这通常不影响阅读。
-* 当 '''宽度''' 超出屏幕可显示范围时，会出现 '''左右滚动条'''，这会导致阅读困难。📜 因为用户需要不断左右滑动，才能阅读完整的内容。
+* 当'''宽度'''超出屏幕显示范围时，会出现'''左右滚动条'''，这会导致阅读困难，因为用户需要不断左右滑动才能阅读完整内容。
-由于现代网页主要采用 '''横向排版'''，我们应尽量避免 '''页面元素超出屏幕宽度'''，否则会严重影响移动端用户的阅读体验。
+由于现代网页主要采用'''横向排版'''，应尽量避免'''页面元素超出屏幕宽度'''，尤其是在移动设备上。
-== 📱 移动设备的屏幕宽度 ==
+== 📱 移动设备屏幕特性 ==
-移动设备的屏幕宽度通常在 '''320px 至 414px''' 之间（'''不考虑像素密度 dpi'''）。虽然手机屏幕的物理分辨率越来越高，但网页的实际显示尺寸仍然受限于设备的可视区域。因此：
+移动设备屏幕宽度通常在'''320px至414px'''之间（不考虑像素密度）。虽然手机物理分辨率越来越高，但网页显示仍受限于设备可视区域：
-* '''桌面端''' 屏幕宽度一般不会低于 '''1024px'''。
+* '''桌面端'''屏幕宽度一般不低于'''1024px'''
-* '''移动端''' 适合的内容宽度应控制在 '''≤ 300px'''，否则可能会导致 '''横向滚动'''。
+* '''移动端'''理想内容宽度应控制在'''≤414px'''，避免横向滚动
-== 🎯 访问 MediaWiki 站点的常见屏幕分辨率 ==
+== 🎯 常见屏幕分辨率 ==
-在 MediaWiki 站点中，常见的屏幕分辨率分布如下：
+MediaWiki站点访问设备的典型分辨率分布：
 {| class="wikitable"
 |-
@@ 第19行： / 第21行： @@
 | 桌面端 || ≥ 1024px
 |-
 | 平板设备 || 600px - 1024px
 |-
 | 手机端 || 320px - 414px
 |}
-== ✅ 如何优化页面以适应移动端 ==
+== ✅ 移动端优化策略 ==
-为了改善移动端的阅读体验，我们可以采取以下优化策略：
-=== 📊 表格优化 ===
+=== 📊 表格响应式优化 ===
-表格是 MediaWiki 页面中常见的排版方式，但很多表格的默认宽度会超过移动端屏幕。为了避免 '''横向滚动'''，我们可以使用 '''.table-responsive''' 进行优化：
+表格是MediaWiki中常见元素，但容易导致移动端横向滚动。推荐使用响应式表格：
 <syntaxhighlight lang="html">
 <div class="table-responsive">
+{| class="wikitable"
-<table style="width:800px;background-color:black">
+|-
-<tr><td>示例表格</td></tr>
+! 标题1
-</table>
+! 标题2
+|-
+| 内容1
+| 内容2
+|}
 </div>
 </syntaxhighlight>
+或者使用CSS实现：
-🔹 '''效果'''：
+<syntaxhighlight lang="css">
-该表格在桌面端仍然使用 800px 宽度，但在手机端会变成 '''可横向拖动'''，避免撑开整个页面。
+.mw-responsive-table {
+  width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+</syntaxhighlight>
+🔹 '''效果'''：桌面端保持原宽度，移动端变为可横向滚动，不撑破页面布局。
-=== 📐 让定宽元素自适应屏幕 ===
-某些定宽块状元素（如图片、容器等），可以使用 <code>.full-width-xs</code> 让它们在移动端自适应屏幕宽度：
+=== 📐 自适应元素设计 ===
+对于图片、容器等定宽元素，使用MediaWiki的CSS类实现自适应：
 <syntaxhighlight lang="html">
-<div class="full-width-xs" style="width:600px;height:400px;background-color:black">
+<div class="mw-mobile-responsive" style="max-width: 600px; margin: 0 auto;">
+[[File:示例图片.jpg|alt=示例|600px]]
 </div>
 </syntaxhighlight>
 🔹 '''效果'''：
-* '''桌面端''' 仍然保持 600px 宽度。
+* '''桌面端'''：保持600px宽度
-* '''移动端''' 宽度会自动调整为 '''100%'''，适应屏幕尺寸。
+* '''移动端'''：自动调整为100%宽度
-=== 🧐 预览移动端效果 ===
+=== 🎨 使用多列模板 ===
+MediaWiki的Columns模板可以帮助创建响应式多列布局：
-在优化移动端页面时，我们可以在桌面浏览器中模拟移动设备的效果。例如，在 '''Chrome 浏览器''' 中：
+<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>&lt;syntaxhighlight&gt;</code>标签
+|}
+== 🔚 总结 ==
-# 右键点击页面，选择 '''审查元素（Inspect）''' 🔍。
+通过上述优化方法，可以显著改善MediaWiki页面在移动端的阅读体验：
-# 点击 '''移动设备预览''' 📱（通常是一个手机/平板的图标）。
+* 使用'''响应式表格'''和'''自适应布局'''
-# 在顶部工具栏中，选择不同的设备分辨率，查看页面在移动端的显示效果。
+* 合理配置'''移动端皮肤'''
+* 充分利用'''预览和测试'''工具
+* 遵循MediaWiki编辑最佳实践
+记住：在编辑过程中随时预览移动端效果，确保所有用户都能获得良好的阅读体验！
-== 🔚 结语 ==
-通过上述优化方法，我们可以 '''减少横向滚动'''，让 MediaWiki 页面在 '''移动端更易阅读''' 🎉。建议在编辑页面时，提前 '''预览移动端效果'''，确保布局适配不同设备，让用户享受更佳的阅读体验！🚀
+<includeonly>[[Category:帮助文档]]</includeonly>
+<noinclude>
 {{Template:站点帮助文档}}
+</noinclude>