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

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

== 📏 宽度 vs 高度 ==

网页布局通常涉及'''宽度'''和'''高度'''：

* 当'''高度'''超出屏幕显示范围时，会出现'''上下滚动条'''，但这通常不影响阅读。

* 当'''宽度'''超出屏幕显示范围时，会出现'''左右滚动条'''，这会导致阅读困难，因为用户需要不断左右滑动才能阅读完整内容。

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

== 📱 移动设备屏幕特性 ==

移动设备屏幕宽度通常在'''320px至414px'''之间（不考虑像素密度）。虽然手机物理分辨率越来越高，但网页显示仍受限于设备可视区域：

* '''桌面端'''屏幕宽度一般不低于'''1024px'''

* '''移动端'''理想内容宽度应控制在'''≤414px'''，避免横向滚动

== 🎯 常见屏幕分辨率 ==

MediaWiki站点访问设备的典型分辨率分布：

{| class="wikitable"

|-

! 设备类型 !! 常见屏幕宽度

|-

| 桌面端 || ≥ 1024px

|-

| 平板设备 || 600px - 1024px

|-

| 手机端 || 320px - 414px

|}

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

=== 📊 表格响应式优化 ===

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

<div class="table-responsive">

! 标题1

! 标题2

|-

| 内容1

| 内容2

或者使用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>

=== 🧪 移动端效果测试 ===

在桌面浏览器中测试移动端显示：

1. 右键点击页面，选择'''审查元素'''

2. 点击'''设备模拟'''图标（手机/平板）

3. 选择不同设备分辨率测试显示效果

== 🔧 高级布局调整 ==

=== 页面宽度全局调整 ===

通过修改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>标签

|}

== 🔚 总结 ==

通过上述优化方法，可以显著改善MediaWiki页面在移动端的阅读体验：

* 使用'''响应式表格'''和'''自适应布局'''

* 合理配置'''移动端皮肤'''

* 充分利用'''预览和测试'''工具

* 遵循MediaWiki编辑最佳实践

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

<includeonly>[[Category:帮助文档]]</includeonly>

<noinclude>

</noinclude>