私はMediaWikiでメディアクエリを使って反応するスキンを手に入れようとしています。私はいくつかの奇妙な動作をトラブルシューティングしています。私はwikiページにテストdiv要素を追加した場合MediaWikiでMedia Queriesが動作しますか?
:
<div id="testing">TESTING</div>
そして、メディアクエリを追加:さまざまな場所に...
@media screen {
#testing {background-color: green;}
}
を、スタイルは、特定のブラウザに適用されます。たとえば、次のように
私はアクティブスキンの "screen.css" ファイルに追加した場合は、他のすべての働き方に住ん:
- のiPad:NO
- iPhone4の:NO
- クローム20.0 XP +マック:NO
- のFirefox 14.0.1 XP +マック:YES
私はすべての皮膚に適用される一般的な皮膚の "shared.css" ファイルにそれを追加した場合:
- のiPad:NO
- iPhone4の:NO
- クローム20.0 XP +マック:NO
- のFirefox 14.0.1 XP +マック:YES
私はwikiのにそれを追加した場合"MediaWikiの:Common.css" ページ:
- のiPad:YES
- iPhone4の:YES
- クローム20.0 XP +マック:YES
- のFirefox 14.0.1 XP +マック:YES
N.B.:通常のスタイルの宣言は、これらの場所のすべてで、として正常に動作します。奇妙なことが出てくるのは、外部ファイルのメディアクエリにラップされているときだけです。これは明らかにブラウザの問題で、MediaWikiのスタイル処理に関する問題があります。 Firefoxはどういう仕組みですか?
Chromeのデベロッパーコンソールでページを確認して、スタイルが「load.php」によってインポートされているように見えることに気付きました。これは、メディアクエリを含むスタイル宣言の大きな結合ラインです。しかし、それをサポートしているブラウザでさえ、それはちょうど適用されていないようです。
誰でもこの現象を解明できますか?私はwikiエディタではなくスタンドアロンのスタイルシートで作業したいと思っています。
更新:
load.php:1 @media screen
#testing {
background-color: green;
}
要素を検査する場合:
私はFirefoxのWebコンソールの要素を検査するときに同じように、スタイルは、アクティブなスタイルの中で記載されていることにも注意してくださいChromeの開発ツールの要素ブラウザと同じように、スタイルはどこにもリストされていません。
アップデート2:
私は私のテーマでこの行を交換する場合:テーマへの直接リンクして
<link rel="stylesheet" href="/wiki/load.php?debug=false&lang=en&modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&only=styles&skin=customskin&*" />
:
<link rel="stylesheet" href="wiki/skins/customskin/screen.css" />
をスタイルが適切にどこにでも適用されます。