MediaWikiをモバイルに適したものにする
このページまたは節は、Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis とともに、統合することが提案されています。(議論) |
ウィキペディアを含めた 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)
この問題の影響が出ているページのリスト: 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