帮助:移动优化 - 版本历史

Maintenance script：补充移动优化验证步骤

2025-12-26T13:12:15Z

补充移动优化验证步骤

Maintenance script：补充移动优化验证步骤

2025-12-26T13:12:05Z

补充移动优化验证步骤

←上一版本		2025年12月26日 (五) 21:12的版本
第1行：		第1行：
	本指南介绍如何优化 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: 站点帮助文档}}

Maintenance script：校对修改：修复强调文本前后多余空格、不一致的空格等问题

2025-12-26T12:12:13Z

校对修改：修复强调文本前后多余空格、不一致的空格等问题

←上一版本		2025年12月26日 (五) 20:12的版本
第2行：		第2行：

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

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

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

	== 🎯 常见屏幕分辨率 ==		== 🎯 常见屏幕分辨率 ==
第52行：		第52行：
	</syntaxhighlight>		</syntaxhighlight>

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

	=== 📐 自适应元素设计 ===		=== 📐 自适应元素设计 ===
第63行：		第63行：
	</syntaxhighlight>		</syntaxhighlight>

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

	=== 🎨 使用多列模板 ===		=== 🎨 使用多列模板 ===
第84行：		第84行：

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

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

第105行：		第105行：
	=== 页面宽度全局调整 ===		=== 页面宽度全局调整 ===
	通过修改 MediaWiki 皮肤 CSS 调整整体宽度：		通过修改 MediaWiki 皮肤 CSS 调整整体宽度：
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">/* 在 MediaWiki:Common.css 中添加 */#globalWrapper {
	/* 在 MediaWiki:Common.css 中添加 */
	#globalWrapper {
	max-width: 1200px;		max-width: 1200px;
	margin: 0 auto;		margin: 0 auto;
第143行：		第141行：
	== 🔚 总结 ==		== 🔚 总结 ==
	通过上述优化方法，可以显著改善 MediaWiki 页面在移动端的阅读体验：		通过上述优化方法，可以显著改善 MediaWiki 页面在移动端的阅读体验：
	* 使用 '''响应式表格''' 和 '''自适应布局'''		* 使用 '''响应式表格'' 和 '''自适应布局''
	* 合理配置 '''移动端皮肤'''		* 合理配置 '''移动端皮肤''
	* 充分利用 '''预览和测试''' 工具		* 充分利用 '''预览和测试'' 工具
	* 遵循 MediaWiki 编辑最佳实践		* 遵循 MediaWiki 编辑最佳实践

Maintenance script：校对修改：修复强调文本前后多余空格、不一致的空格等问题

2025-12-26T12:08:44Z

校对修改：修复强调文本前后多余空格、不一致的空格等问题

←上一版本		2025年12月26日 (五) 20:08的版本
第2行：		第2行：

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

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

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

	== 🎯 常见屏幕分辨率 ==		== 🎯 常见屏幕分辨率 ==
第53行：		第52行：
	</syntaxhighlight>		</syntaxhighlight>

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

	=== 📐 自适应元素设计 ===		=== 📐 自适应元素设计 ===
第64行：		第63行：
	</syntaxhighlight>		</syntaxhighlight>

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

	=== 🎨 使用多列模板 ===		=== 🎨 使用多列模板 ===
第85行：		第84行：

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

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

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

XP-jia：更新格式

2025-11-14T09:36:33Z

更新格式

显示更改

XP-jia：update

2025-11-14T05:11:10Z

update

显示更改

XP-jia：修改格式

2025-03-01T12:31:40Z

修改格式

←上一版本		2025年3月1日 (六) 20:31的版本
第1行：		第1行：
	在移动设备上浏览网页时，屏幕尺寸的限制使得优化网页布局变得尤为重要。本页面介绍如何优化 MediaWiki 页面，使其在移动端更友好地显示，提升阅读体验。🚀

	== 📏 宽度 vs 高度 ==		== 📏 宽度 vs 高度 ==
	网页的布局通常涉及 '''宽度''' 和 '''高度'''：		网页的布局通常涉及 '''宽度''' 和 '''高度'''：
第29行：		第27行：
	为了改善移动端的阅读体验，我们可以采取以下优化策略：		为了改善移动端的阅读体验，我们可以采取以下优化策略：

	=== 表格优化 ===		=== 📊 表格优化 ===
	表格是 MediaWiki 页面中常见的排版方式，但很多表格的默认宽度会超过移动端屏幕。为了避免 '''横向滚动'''，我们可以使用 '''.table-responsive''' 进行优化：		表格是 MediaWiki 页面中常见的排版方式，但很多表格的默认宽度会超过移动端屏幕。为了避免 '''横向滚动'''，我们可以使用 '''.table-responsive''' 进行优化：

第40行：		第38行：
	</syntaxhighlight>		</syntaxhighlight>

			🔹 '''效果'''：
	~~🔹 '''效果'''：~~该表格在桌面端仍然使用 800px 宽度，但在手机端会变成 '''可横向拖动'''，避免撑开整个页面。		该表格在桌面端仍然使用 800px 宽度，但在手机端会变成 '''可横向拖动'''，避免撑开整个页面。

	=== 让定宽元素自适应屏幕 ===		=== 📐 让定宽元素自适应屏幕 ===
	某些定宽块状元素（如图片、容器等），可以使用 `.full-width-xs` 让它们在移动端自适应屏幕宽度：		某些定宽块状元素（如图片、容器等），可以使用 <code>.full-width-xs</code> 让它们在移动端自适应屏幕宽度：

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
第54行：		第53行：
	* '''移动端''' 宽度会自动调整为 '''100%'''，适应屏幕尺寸。		* '''移动端''' 宽度会自动调整为 '''100%'''，适应屏幕尺寸。

	=== 预览移动端效果 ===		=== 🧐 预览移动端效果 ===
	在优化移动端页面时，我们可以在桌面浏览器中模拟移动设备的效果。例如，在 '''Chrome 浏览器''' 中：		在优化移动端页面时，我们可以在桌面浏览器中模拟移动设备的效果。例如，在 '''Chrome 浏览器''' 中：

XP-jia：new

2025-02-24T13:50:09Z

new

新页面

在移动设备上浏览网页时，屏幕尺寸的限制使得优化网页布局变得尤为重要。本页面介绍如何优化 MediaWiki 页面，使其在移动端更友好地显示，提升阅读体验。🚀

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

由于现代网页主要采用 '''横向排版'''，我们应尽量避免 '''页面元素超出屏幕宽度'''，否则会严重影响移动端用户的阅读体验。

== 📱 移动设备的屏幕宽度 ==
移动设备的屏幕宽度通常在 '''320px 至 414px''' 之间（'''不考虑像素密度 dpi'''）。虽然手机屏幕的物理分辨率越来越高，但网页的实际显示尺寸仍然受限于设备的可视区域。因此：
* '''桌面端''' 屏幕宽度一般不会低于 '''1024px'''。
* '''移动端''' 适合的内容宽度应控制在 '''≤ 300px'''，否则可能会导致 '''横向滚动'''。

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

== ✅ 如何优化页面以适应移动端 ==
为了改善移动端的阅读体验，我们可以采取以下优化策略：

=== 表格优化 ===
表格是 MediaWiki 页面中常见的排版方式，但很多表格的默认宽度会超过移动端屏幕。为了避免 '''横向滚动'''，我们可以使用 '''.table-responsive''' 进行优化：

<syntaxhighlight lang="html">
<div class="table-responsive">
<table style="width:800px;background-color:black">
<tr><td>示例表格</td></tr>
</table>
</div>
</syntaxhighlight>

🔹 '''效果'''：该表格在桌面端仍然使用 800px 宽度，但在手机端会变成 '''可横向拖动'''，避免撑开整个页面。

=== 让定宽元素自适应屏幕 ===
某些定宽块状元素（如图片、容器等），可以使用 `.full-width-xs` 让它们在移动端自适应屏幕宽度：

<syntaxhighlight lang="html">
<div class="full-width-xs" style="width:600px;height:400px;background-color:black">
</div>
</syntaxhighlight>

🔹 '''效果'''：
* '''桌面端''' 仍然保持 600px 宽度。
* '''移动端''' 宽度会自动调整为 '''100%'''，适应屏幕尺寸。

=== 预览移动端效果 ===
在优化移动端页面时，我们可以在桌面浏览器中模拟移动设备的效果。例如，在 '''Chrome 浏览器''' 中：

# 右键点击页面，选择 '''审查元素（Inspect）''' 🔍。
# 点击 '''移动设备预览''' 📱（通常是一个手机/平板的图标）。
# 在顶部工具栏中，选择不同的设备分辨率，查看页面在移动端的显示效果。

== 🔚 结语 ==
通过上述优化方法，我们可以 '''减少横向滚动'''，让 MediaWiki 页面在 '''移动端更易阅读''' 🎉。建议在编辑页面时，提前 '''预览移动端效果'''，确保布局适配不同设备，让用户享受更佳的阅读体验！🚀

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

帮助:移动优化 - 版本历史

Maintenance script：​补充移动优化验证步骤

Maintenance script：​补充移动优化验证步骤

Maintenance script：​校对修改：修复强调文本前后多余空格、不一致的空格等问题

Maintenance script：​校对修改：修复强调文本前后多余空格、不一致的空格等问题

XP-jia：​更新格式

XP-jia：​update

XP-jia：​修改格式

XP-jia：​new

Maintenance script：补充移动优化验证步骤

Maintenance script：补充移动优化验证步骤

Maintenance script：校对修改：修复强调文本前后多余空格、不一致的空格等问题

Maintenance script：校对修改：修复强调文本前后多余空格、不一致的空格等问题

XP-jia：更新格式

XP-jia：update

XP-jia：修改格式

XP-jia：new