手册:手机、平板电脑和响应式设计

在移动设备上使用Minerva Neue皮肤和MobileFrontend扩展的MediaWiki.org网页

MediaWiki 可在许多移动设备（即智能手机和平板电脑）上运行，但它“未”针对移动设备进行优化。 除非您添加额外的皮肤或扩展，否则这意味着网站可能很难查看，菜单、布局和媒体不会出现在最佳位置。

除了 Timeless 皮肤外，与 MediaWiki 捆绑在一起的所有皮肤（包括最新的默认皮肤Vector ）都没有针对手机使用进行优化。 本页面提供有关在移动设备（例如智能手机和平板电脑）上使用 MediaWiki 的建议。

解决方案

有两种常见的方法：

• Skin:Timeless is already bundled with MediaWiki. Make sure it is registered in LocalSettings.php so it is available as a setting in preferences. Consider using it as the default .
• Skin:Minerva Neue is bundled with MediaWiki since version 1.38. Its mobile mode requires installing Extension:移动前端 . This is the method Wikipedia uses.

扩展

• 扩展:MobileApp - 提供用于维基媒体移动应用程序的样式和脚本的简单应用程序
• Extension:移动前端 - 提供适合移动设备的视图。 由维基媒体开发，并在维基百科上使用。 仅安装此扩展程序本身将使您的 MediaWiki 网站适合移动设备，并且它包含自己的皮肤。

皮肤

如果您使用皮肤，则不需要扩展。 用于移动浏览器的皮肤有两种形式：

1. 那些专为移动设备使用而设计的内容，在非移动设备上可能效果不佳。 MediaWiki 检测其运行的设备类型，然后切换到适当的皮肤。 （参见 Extension:MobileDetect）
   1. WPtouch - 使用移动主题格式化您的 wiki 的皮肤
2. 响应式皮肤，旨在自动响应屏幕尺寸，无论是台式电脑、平板电脑还是智能手机。
   1. 皮肤:Tweeki - 针对语义 wiki 进行了优化
   2. 皮肤：变色龙 - 可定制五种不同的布局
   3. Medik
   4. Metrolook
   5. 清新 - 使用响应式CSS来适应移动设备
   6. 皮肤:Foreground
   7. Timeless (MW 1.31+) - 支持响应式设计的维基媒体皮肤
   8. ...以及更多！

CSS & JS

使用 Extension:移动前端 时，您可以编辑 wiki 页面 MediaWiki:Mobile.css（请参阅 Manual:CSS ）和 MediaWiki:Mobile.js 以仅在移动设备上应用全局样式和脚本。

开发人员

参阅： Making MediaWiki Mobile Friendly

• 分类:移动 - 与移动设备开发和演示相关的项目、扩展和其他页面。
• Reading/Web - 负责创建、发展和发展不同的维基媒体项目如何使用移动技术
• 手册:$wgResponsiveImages (MW 1.21+) - 是否为高 DPI 显示器输出高分辨率图像。
• Extension:MobileDetect (MW 1.15+) - 允许用户控制哪些内容仅在移动浏览器中显示，或仅在桌面上显示
• 分类:移动皮肤 - 移动设备的皮肤