使用笔记/移动设备优化篇

该页面尚未完成。

你可以帮助我们扩充关于该主题的更多信息。

该页面的编辑正在进行中。

请帮助我们扩充或改进这篇文章。

MediaWiki的默认皮肤Vector对移动端其实没有特别的优化。虽然一部分皮肤自带了响应式设计，但是一些页面（比如最近更改和历史差异）依然对手机很不友好。以下将介绍MediaWiki上的移动设备优化。

MobileFrontend

主条目：mw:Extension:MobileFrontend

MobileFrontend添加了移动端视图（为移动设备显示特定的皮肤）与一部分特殊页面的移动设备优化版本，调整了部分元素在移动端的显示效果。其可以说提供了最基本的移动设备体验优化。

根据安装提示安装完毕后，你的站点应当可以检测设备尺寸并自动展示对应的视图了。

在安装完这个扩展程序后，站点的CSS和JS就需要做出相应的调整了。将桌面端视图专用的CSS和JS放在Common.css与Common.js内，而移动端视图专用的则应当放到Mobile.css与Mobile.js内。若启用了Gadgets，则可以把两个视图通用的CSS与JS放在一个targets设置为desktop,mobile的Gadget里面。我站分别是MediaWiki:Gadget-site-styles.css和MediaWiki:Gadget-site.js。

但是，很有可能你并没有在一开始就区分好哪些是移动端专用的。这时你就需要考虑自己优化。

扩展程序不能帮你解决所有问题

在移动端视图，你很有可能会遇到页面宽度超限的情况。

但是遗憾的是，扩展程序不能自动修复这些问题⸺也就是说，如果你写了一个特别大的表格，那么手机端很可能没法好好查看。

遇到这种情况，你就需要自行应用一些CSS。以下介绍一些常见问题及其优化方法。

常见问题

大表格超宽

FandomMobile的处理是，处理成超宽滚动，主要是通过CSS的overflow去处理。

模板超宽或需要在不同的屏幕尺寸上显示不同的布局

通过CSS的媒体查询（Media queries）可以自行打断点。同时也需要灵活运用flex布局和grid布局。

部分扩展程序不能在移动版视图工作

对一些扩展来说，可能有人修复。另一些则也没什么办法。