Jump to content

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

From mediawiki.org
This page is a translated version of the page Manual:Mobiles, tablets and responsive design and the translation is 94% complete.
在移动设备上使用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