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

（未显示同一用户的3个中间版本）

第2行：

== 📏 宽度 vs 高度 ==

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

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

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

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

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

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

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

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

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

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

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

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

*'' 桌面端 '''屏幕宽度一般不低于''1024px'''*'' 移动端 '''理想内容宽度应控制在''≤414px'''，避免横向滚动

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

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

第53行：

第52行：

</syntaxhighlight>

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

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

=== 📐 自适应元素设计 ===

第64行：

第63行：

</syntaxhighlight>

🔹 ''' 效果 '''：

🔹 '''效果''：

* ''' 桌面端 '''：保持 600px 宽度

* '''桌面端''：保持 600px 宽度

* ''' 移动端 '''：自动调整为 100% 宽度

* '''移动端''：自动调整为 100% 宽度

=== 🎨 使用多列模板 ===

第85行：

第84行：

=== ✏️ 编辑最佳实践 ===

* 编辑时使用 ''' 显示预览 ''' 功能检查效果

* 编辑时使用 '''显示预览'' 功能检查效果

* 在 ''' 编辑摘要 ''' 中简要描述修改内容

* 在 '''编辑摘要'' 中简要描述修改内容

* 使用 ''' 显示更改 ''' 对比版本差异

* 使用 '''显示更改'' 对比版本差异

=== 📱 移动端皮肤配置 ===

第98行：

第97行：

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

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

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

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

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

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

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

第106行：

第105行：

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

通过修改 MediaWiki 皮肤 CSS 调整整体宽度：

<syntaxhighlight lang="css">/* 在 MediaWiki:Common.css 中添加 */#globalWrapper {

/* 在 MediaWiki:Common.css 中添加 */

#globalWrapper {

max-width: 1200px;

margin: 0 auto;

第124行：

第121行：

[[File: 示例.jpg|frameless|600px|class=responsive-img|alt = 替代文本]]

</syntaxhighlight>

== 测试与验证 ==

* 在桌面浏览器开发者工具中启用设备模拟，分别测试 320px、375px 和 414px 宽度，确保关键内容不会横向溢出。

* 参考 [[MediaWiki:Common.css]] 中的全局响应式样式，如果需自定义可在 [[MediaWiki:Common.js]] 或 [[MediaWiki:Common.css]] 添加局部规则。

* 完成修改后，利用 [[Help:快速指南]] 中的预览与显示更改功能验证在移动/桌面视图的实际表现。

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

第144行：

第147行：

== 🔚 总结 ==

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

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

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

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

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

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

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

* 遵循 MediaWiki 编辑最佳实践