陋室

Help:移动优化：修订间差异

以互动方式浏览历史
←上一编辑下一编辑→

XP-jia​（留言 | 贡献）

3个用户组
1,055次编辑
删除的内容 添加的内容
可视化wikitext
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,055次编辑
修改格式
XP-jia​（留言 | 贡献）
行政员、​界面管理员、​管理员
1,055次编辑
update
第1行：
本指南介绍如何优化MediaWiki页面布局，特别是在移动设备上的显示效果。
 
== 📏 宽度 vs 高度 ==
网页的布局通常涉及 '''宽度''' 和 '''高度'''：
* 当 '''高度''' 超出屏幕可显示范围时，会出现 '''上下滚动条'''，但这通常不会对影响阅读体验造成太大影响。
* 当 '''宽度''' 超出屏幕可显示范围时，会出现 '''左右滚动条'''，这会导致阅读困难。📜 ，因为用户需要不断左右滑动，才能阅读完整的内容。
 
由于现代网页主要采用 '''横向排版'''，我们应尽量避免 '''页面元素超出屏幕宽度'''，否则会严重影响尤其是在移动端用户的阅读体验设备上。
 
== 📱 移动设备的屏幕宽度特性 ==
移动设备的屏幕宽度通常在 '''320px 至 414px''' 之间（'''不考虑像素密度 dpi'''）。虽然手机屏幕的物理分辨率越来越高，但网页的实际显示尺寸仍然受限于设备的可视区域。因此：
* '''桌面端''' 屏幕宽度一般不会低于 '''1024px'''。
* '''移动端''' 适合的理想内容宽度应控制在 '''≤ 300px≤414px'''，否则可能会导致 '''避免横向滚动'''。
 
== 🎯 访问 MediaWiki 站点的常见屏幕分辨率 ==
在 MediaWiki 站点中，常见访问设备的屏幕典型分辨率分布如下：
{| class="wikitable"
|-
第19行 ⟶ 第21行：
| 桌面端 || ≥ 1024px
|-
| 平板设备 || 600px - 1024px
|-
| 手机端 || 320px - 414px
|}
 
== ✅ 如何优化页面以适应移动端优化策略 ==
为了改善移动端的阅读体验，我们可以采取以下优化策略：
 
=== 📊 表格响应式优化 ===
表格是 MediaWiki 页面中常见的排版方式元素，但很多表格的默认宽度会超过容易导致移动端屏幕。为了避免 '''横向滚动'''，我们可以。推荐使用 '''.table-responsive''' 进行优化响应式表格：
 
<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="fullmw-widthmobile-xsresponsive" style="max-width: 600px;height margin:400px 0 auto;background-color:black">
[[File:示例图片.jpg|alt=示例|600px]]
</div>
</syntaxhighlight>
 
🔹 '''效果'''：
* '''桌面端''' 仍然：保持 600px 宽度。
* '''移动端''' 宽度会：自动调整为 '''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>
 
=== 🧪 移动端效果测试 ===
在桌面浏览器中测试移动端显示：
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>标签
|}
 
== 🔚 总结 ==
# 右键点击页面，选择 '''审查元素（Inspect）''' 🔍。
通过上述优化方法，可以显著改善MediaWiki页面在移动端的阅读体验：
# 点击 '''移动设备预览''' 📱（通常是一个手机/平板的图标）。
* 使用'''响应式表格'''和'''自适应布局'''
# 在顶部工具栏中，选择不同的设备分辨率，查看页面在移动端的显示效果。
* 合理配置'''移动端皮肤'''
* 充分利用'''预览和测试'''工具
* 遵循MediaWiki编辑最佳实践
 
记住：在编辑过程中随时预览移动端效果，确保所有用户都能获得良好的阅读体验！
== 🔚 结语 ==
通过上述优化方法，我们可以 '''减少横向滚动'''，让 MediaWiki 页面在 '''移动端更易阅读''' 🎉。建议在编辑页面时，提前 '''预览移动端效果'''，确保布局适配不同设备，让用户享受更佳的阅读体验！🚀
 
<includeonly>[[Category:帮助文档]]</includeonly>
<noinclude>
{{Template:站点帮助文档}}
</noinclude>
取自“https://xn--k7y073b.xn--6qqs2j68e.xn--fiqs8s/wiki/Help:移动优化”