MediaWikiをモバイルに適したものにする

ウィキペディアを含めた MediaWiki のページについて、モバイル版表示の拡張機能 MobileFrontend を介して表示する際の問題点と、その解決策を説明します。 HTMLタグのインラインでのCSSスタイル (style=) の使用が共通した原因となっており、解決策と共に挙げていきます。 問題が出ているページも、本文書からリンクされています。

問題を解決する修正法をご存じであれば歓迎しています。

本文書はウォッチリストに入っていますから、もしモバイル版で正しく表示されていないものを見つけたら、ここに記録できます。そうすればコミュニティはどう解決するかについて合意することができ、影響されているページの一覧を挙げ皆で修正することもできます。

2カラム・レイアウト

問題: 一部のページ（主にポータル）には、モバイル版でうまく表示されていない2カラムレイアウトが使われています。

原因: 以下のようなインライン・スタイルが原因になっている傾向があります。

float:left; width:60%

float:left; width:51%;

float:right; width:48%

float:right; width:48%

解決策: インライン・スタイルを、一般的な2カラム・レイアウトのクラスに置き換えます。スタイルシートを使えば、小さなスクリーンに対応するルールを記載することができます。(英語版ウィキペディアのcommon.cssに記述されたクラス: portal-column-left-wide, portal-column-left, portal-column-right, portal-column-right-narrow)

例: Portal:Missouri

この問題の影響が出ているページのリスト: List of Problematic portal pages with two column layouts

column-countの使用

問題: 一部のページでは、モバイル版で出典・脚注が潰れて表示されています。

原因: column-count というCSSプロパティの使用が原因です。

解決策: インラインでスタイルを指定するよりも、問題が出ているウィキの MediaWiki:Common.css にて、column-count プロパティを記述すべきです。（実際のコードをご覧ください） 指定したクラスに置き換えます。（例えば column-count:4 というコードではなく .column-count-4 クラスに置き換えます）

column-count ではなく column-width使ってはどうでしょう？ 以下も参照: MediaWiki talk:Common.css/Archive 14#Column-count usage across Wikipedia.

TheDJ (talk) 20:51, 5 June 2012 (UTC)

例:なし N/A

この問題の影響が出ているページのリスト: List of Problematic pages with multi column lists

Template for broken style

この節をコピーして、以上のように新しい問題の記録に使えます。

insert image here

Problem: Explain the image above outlining what the problem is

Cause: Explain what styling is causing this problem.

put sample code here

Resolution: Describe a resolution to the problem

Examples: link to a fix in the diff

Pages effected: This should link to a list of articles that are effected by the problem. Lists can be generated by downloading a dump of latest articles and grepping for pattern