帮助:移动优化

📏 宽度 vs 高度

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

• 当 高度 超出屏幕可显示范围时，会出现 上下滚动条，但这不会对阅读体验造成太大影响。
• 当 宽度 超出屏幕可显示范围时，会出现 左右滚动条，这会导致阅读困难。📜 因为用户需要不断左右滑动，才能阅读完整的内容。

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

📱 移动设备的屏幕宽度

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

• 桌面端 屏幕宽度一般不会低于 1024px。
• 移动端 适合的内容宽度应控制在 ≤ 300px，否则可能会导致 横向滚动。

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

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

设备类型	常见屏幕宽度
桌面端	≥ 1024px
平板设备	600px - 1024px
手机端	320px - 414px

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

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

📊 表格优化

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

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

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

📐 让定宽元素自适应屏幕

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

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

🔹 效果：

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

🧐 预览移动端效果

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

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

🔚 结语

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