Manual:Mobiles, tablets and responsive design/zh

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

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

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

解决方案

有两种常见的方法:

  • : 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.
  • : is bundled with MediaWiki since version 1.38. Its mobile mode requires installing :. This is the method Wikipedia uses.

扩展

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

皮肤

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

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

CSS & JS

使用 : 时,您可以编辑 wiki 页面 MediaWiki:Mobile.css(请参阅 :)和 MediaWiki:Mobile.js 以仅在移动设备上应用全局样式和脚本。

开发人员

Making MediaWiki Mobile Friendly

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

See also

Category:User interface/zh#Mobiles,%20tablets%20and%20responsive%20design/zh Category:Skinning/zh#Mobiles,%20tablets%20and%20responsive%20design/zh Category:Mobile/zh
Category:Mobile/zh Category:Skinning/zh Category:User interface/zh