MediaWiki手机版皮肤开发实战指南

早晨端着咖啡调试皮肤样式时，突然发现手机端有个按钮死活对不齐。这种糟心体验让我意识到，给MediaWiki做移动端主题开发，真得掌握些特殊技巧。

一、准备工作别偷懒

先把手头的工具备齐：

• 最新版MediaWiki（推荐1.39+）
• 代码编辑器（VSCode或Sublime都行）
• 安卓+iOS真机各一部
• 抓包工具Fiddler

1.1 皮肤文件结构解析

打开默认的MinervaNeue皮肤，会发现这些核心文件：

• skin.json 皮肤注册文件
• resources/skin.less 样式主战场
• Template.php 页面结构控制器

开发方式	维护成本	定制自由度	数据来源
响应式设计	低	中	《移动端Web开发实践》
插件扩展	中	高	MediaWiki官方文档
完全自定义	高	100%	实际项目经验

二、手机版专属样式实战

记得上次给百科类站点改版，发现这些关键点必须处理：

2.1 导航栏改造秘籍

在skin.less里添加：

mw-mf-page-center {
padding-top: 56px !important;  / 给固定导航留空间 /
.mw-ui-icon-menu {
width: 28px !important;  / 汉堡菜单适配全面屏 /

2.2 字体渲染优化

• iOS优先使用系统字体
• 安卓启用抗锯齿
• 正文字号不小于16px

三、性能调优三板斧

实测加载速度提升方案：

优化项	实施前	实施后	数据来源
图片懒加载	2.8s	1.2s	Chrome Lighthouse
CSS变量替换	148KB	92KB	Webpack打包报告
JS按需加载	32请求	18请求	Network面板统计

3.1 移动端专属资源加载

在skin.json里配置：

ResourceModules": {
skin.mobile": {
targets": [ "mobile" ],
styles": [ "resources/mobile.css" ]

四、调试技巧大全

这些坑我都亲自踩过：

• 用vw单位替代百分比布局
• 媒体查询要包含orientation检测
• 真机调试务必关闭省电模式

4.1 跨设备测试脚本

// 检测横竖屏切换
window.addEventListener("resize",  => {
console.log(`当前方向: ${screen.orientation.type}`);
});

五、常见问题急救包

上周刚解决的三个典型问题：

5.1 搜索框错位怎么办？

添加下列CSS修复：

searchInput {
-webkit-appearance: none;
border-radius: 20px !important;
padding: 8px 15px !important;

窗外天色渐暗，保存完最后一个样式文件，看着手机端完美呈现的新皮肤，终于能安心下班接孩子了。移动端开发就是这样，解决完最后一个像素偏差，整个世界都美好了。