媒體查詢是否可以在MediaWiki中使用？

我試圖通過媒體查詢獲得在MediaWiki中工作的響應式皮膚，並解決了一些奇怪的行爲。媒體查詢是否可以在MediaWiki中使用？

如果我添加一個測試div來一個wiki頁面：

<div id="testing">TESTING</div>

，然後添加一個媒體查詢：

@media screen { 
    #testing {background-color: green;} 
}

...到各個地方，風格只適用於某些瀏覽器。例如：

如果我把它添加到活躍皮膚的「screen.css」的文件，在所有其他工作方式生活：

的iPad：NO
的iPhone4：NO
鉻20.0 XP + MAC：NO
火狐14.0.1 XP + MAC：是

如果我把它添加到常見的皮膚的「shared.css」的文件，它適用於所有的皮膚：

的iPad：NO
的iPhone4：NO
Chrome的20.0 XP + MAC：NO
火狐14.0.1 XP + MAC：是

如果我把它添加到wiki的「鏈接到MediaWiki：Common.css」頁：

iPad的：是
iPhone4的：是
Chrome的20.0 XP + MAC：是
火狐14.0.1 XP + MAC：是

注：：正常樣式聲明按預期在所有這些位置均可正常工作。只有在外部文件中的媒體查詢中包裝時纔會出現奇怪現象。這顯然是一個瀏覽器問題，與MediaWiki樣式處理問題混合在一起。什麼是Firefox做的不同？

我也注意到，在使用Chrome的開發者控制檯檢查頁面時，樣式顯示爲由「load.php」導入爲樣式聲明（包括我的媒體查詢）的一個大型連體線條;但它似乎只是沒有被應用，即使在支持它的瀏覽器中。

任何人都可以闡明這種行爲？我寧願在獨立的樣式表中工作，而不喜歡在wiki編輯器中工作。

更新：

我還要注意檢查在Firefox的Web控制檯的元素時，風格積極的風格中列出的，就像這樣：

load.php:1 @media screen 
#testing { 
    background-color: green; 
}

在視察元素在Chrome的開發工具元素瀏覽器中也是一樣，樣式不在任何地方列出。

更新2：

如果我替換此行我的主題：

<link rel="stylesheet" href="/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&amp;only=styles&amp;skin=customskin&amp;*" />

直接鏈接到主題：

<link rel="stylesheet" href="wiki/skins/customskin/screen.css" />

款式都是正確處處適用。

來源

2012-07-21 meetar

有一對夫婦的方式做到這一點，除了加入查詢Common.css。這兩種方式都繞過了MediaWiki Resource Loader的樣式預處理，這是從1.17版本開始的新增功能。

方法1：

根據this thread：

要加載的單個CSS文件（原始的，而不縮小等的ResourceLoader處理）：使用OutputPage :: addStyle（URL，媒體，條件）url直接指向一個文件。例如：

$out->addStyle('modules/IE70Fixes.css', 'screen', 'IE 7');

所以加入這一行的/skins/customskin.php文件，在initPage()功能：

$out->addStyle('customskin/customstyle.css', 'screen');

方法2：

據一個鏈接到MediaWiki開發商this bug I filed響應：

如果你是在皮膚和你想要的東西，以適用於特定的媒體類型，把它放在一個單獨的文件，並聲明該媒體類型在的資源定義。無論是或忽略媒體類型的資源定義，你就可以使用@media塊。

因此，在資源/ resources.php，在皮膚的數組構造，替換此行：

'styles' => array('customskin/customstyle.css' => array('media' => 'screen')),

這一行：

'styles' => array('customskin/customstyle.css'),

來源

2012-07-23 20:31:28 meetar

媒體查詢是否可以在MediaWiki中使用？

回答

相關問題