使用笔记/移动设备优化篇
来自存档计划,Project Archive by Lakejason0
< 使用笔记
MediaWiki的默认皮肤Vector对移动端其实没有特别的优化。虽然一部分皮肤自带了响应式设计,但是一些页面(比如最近更改和历史差异)依然对手机很不友好。以下将介绍MediaWiki上的移动设备优化。
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。
但是,很有可能你并没有在一开始就区分好哪些是移动端专用的。这时你就需要考虑自己优化。
扩展程序不能帮你解决所有问题
在移动端视图,你很有可能会遇到页面宽度超限的情况。
主要页面 | |
---|---|
正文 | |
外部链接 |