使用笔记/移动设备优化篇:修订间差异
来自存档计划,Project Archive by Lakejason0
< 使用笔记
添加的内容 删除的内容
Lakejason0(留言 | 贡献) |
|||
第10行: | 第10行: | ||
根据安装提示安装完毕后,你的站点应当可以检测设备尺寸并自动展示对应的视图了。 |
根据安装提示安装完毕后,你的站点应当可以检测设备尺寸并自动展示对应的视图了。 |
||
在安装完这个扩展程序后,站点的CSS和JS就需要做出相应的调整了。将桌面端视图专用的CSS和JS放在Common.css与Common.js内,而移动端视图专用的则应当放到Mobile.css与Mobile.js内。若启用了Gadgets,则可以把两个视图通用的CSS与JS放在一个{{cd|targets}}设置为{{cd|desktop,mobile}}的Gadget里面。我站分别是[[MediaWiki:Gadget-site-styles.css]]和[[MediaWiki:Gadget-site.js]]。 |
|||
但是,很有可能你并没有在一开始就区分好哪些是移动端专用的。这时你就需要考虑自己优化。 |
|||
== 扩展程序不能帮你解决所有问题 == |
|||
在移动端视图,你很有可能会遇到页面宽度超限的情况。 |
|||
{{使用笔记}} |
{{使用笔记}} |
2021年5月12日 (三) 16:19的版本
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。
但是,很有可能你并没有在一开始就区分好哪些是移动端专用的。这时你就需要考虑自己优化。
扩展程序不能帮你解决所有问题
在移动端视图,你很有可能会遇到页面宽度超限的情况。
主要页面 | |
---|---|
正文 | |
外部链接 |