本页使用了标题或全文手工转换

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

From Project Archive by Lakejason0
< 使用笔记
Revision as of 16:43, 19 July 2021 by Lakejason0 (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
该页面尚未完成。

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

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

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

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

MobileFrontend[edit | edit source]

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

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

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

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

扩展程序不能帮你解决所有问题[edit | edit source]

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

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

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

常见问题[edit | edit source]

大表格超宽[edit | edit source]

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

部分扩展程序不能在移动版视图工作[edit | edit source]