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

（未显示2个用户的7个中间版本）

第1行：

本页说明如何提高页面在手机与平板端的可读性。

== 📏 宽度 vs 高度 ==

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

* 当 '''高度''' 超出屏幕可显示范围时，会出现 '''上下滚动条'''，但这不会对阅读体验造成太大影响。

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

== 基本原则 ==

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

* 优先保证内容不出现横向溢出。

* 长表格与长代码块要可滚动。

* 重要信息应在小屏首屏可见。

== 常见问题 ==

== 📱 移动设备的屏幕宽度 ==

⚫

=== 宽表格撑破布局 ===

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

可在容器中包裹表格：

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

⚫

* '''移动端''' 适合的内容宽度应控制在 '''≤ 300px'''，否则可能会导致 '''横向滚动'''。

== 🎯 访问 MediaWiki 站点的常见屏幕分辨率 ==

在 MediaWiki 站点中，常见的屏幕分辨率分布如下：

{| class="wikitable"

! 列 1 !! 列 2

|-

| 内容 || 内容

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

|-

| 桌面端 || ≥ 1024px

|-

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

|-

| 手机端 || 320px - 414px

|}

== ✅ 如何优化页面以适应移动端 ==

为了改善移动端的阅读体验，我们可以采取以下优化策略：

⚫

=== 📊 表格优化 ===

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

⚫

</table>

</div>

</syntaxhighlight>

=== 代码块过宽 ===

🔹 '''效果'''：

* 控制单行长度。

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

* 必要时分段展示。

=== 📐 让定宽元素自适应屏幕 ===

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

</div>

</syntaxhighlight>

🔹 '''效果'''：

* '''桌面端''' 仍然保持 600px 宽度。

* '''移动端''' 宽度会自动调整为 '''100%'''，适应屏幕尺寸。

=== 🧐 预览移动端效果 ===

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

=== 图片过大 ===

# 右键点击页面，选择 '''审查元素（Inspect）''' 🔍。

* 指定合理宽度（如 <code>300px</code>）。

# 点击 '''移动设备预览''' 📱（通常是一个手机/平板的图标）。

* 为移动端重点页面避免超宽原图直接内联。

# 在顶部工具栏中，选择不同的设备分辨率，查看页面在移动端的显示效果。

== ~~🔚 结语~~ ==

== 编辑检查清单 ==

* 在移动端皮肤下预览一次。

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

* 确认无横向滚动条覆盖正文。

* 检查表格、图片、模板是否仍可读。

[[Category:帮助文档]]