css文件總是加載儘管未能滿足媒體查詢

我有我的index.html文件的頭部內的以下鏈接樣式代碼：css文件總是加載儘管未能滿足媒體查詢

<link href="static/css/mobile.css" rel="stylesheet" media="screen and (max-width: 739px)">

但是，我1920px寬屏幕上兩個Chrome和Firefox加載mobile.css - 它似乎忽略了內容。它僅僅是渲染頁面所花費的時間的兩倍。

如果無法滿足媒體查詢，有什麼辦法可以防止加載CSS文件？（我想我可以和一些.js一起生活）還是我實施了錯誤？

這似乎顯然是錯誤的瀏覽器會加載一個文件，然後忽略它。

來源

2013-02-23 Matt Parkins

媒體應該不是手持設備嗎？ – hjpotter92 2013-02-23 16:48:26

是的，好點，我可以彈出。我仍然不明白它忽略了寬度 - 也許這是因爲寬度可以改變（通過窗口調整大小或許？），它必須加載文件。 – 2013-02-23 16:50:41

您是否滿足[此處]（http://www.w3.org/TR/CSS2/visudet.html#min-max-widths）針對max-width屬性所陳述的條件？ – hjpotter92 2013-02-23 16:53:19

恐怕瀏覽器總是加載媒體查詢，即使它們不匹配。您可以在這裏更多的細節讀到它：

http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

也是本文中顯示，以防止這種情況的方式。總之它會是這樣的：

您的測試查詢與JS，而不是CSS：window.matchMedia('screen and (max-width: 739px)');。 document.write('<link rel="stylesheet" href="small.css">');

實際的文章有更好的方法把它列入然後document.write，所以你應該看看：

然後，如果它符合你的東西，如添加CSS。

來源

2013-02-23 16:56:22

這太好了。我不會使用matchMedia，因爲它只是剛剛得到支持，我的許多用戶仍然是IE8，所以我會在js中測試width/innerWidth。他的實際建議，在HTML中有鏈接但帶有數據前綴，是完全天才。 – 2013-02-27 13:59:46

這是我最終使用的。它使用了一些jQuery，但如果需要的話，你可以將它從jquery轉換而來。

首先設置像這樣的HTML：

<link class="matchmedia" data-href="static/css/mobile.css" data-rel="stylesheet" data-max="739">

數據-MAX是我們講下面的函數來檢查最大寬度的方式。當函數被調用時，它將查找具有名爲「matchmedia」的類的元素，然後測試您在data-max和data-min中指定的約束，如果它通過了這些測試，它將複製其名稱的任何屬性從「數據 - 」開始並複製值。嘿presto我們有條件加載。

ws.width = <your favourite method of getting the width>; 

function mediaMatchHTML() { 
$(".matchmedia").each(function(){ 
    var min = this.getAttribute("data-min"); //in pixels 
    var max = this.getAttribute("data-max"); 

    //Check condition 
    if ((min === null || ws.width >= min) && (max === null || ws.width <= max)) { 
     for (var c=0; c<this.attributes.length; c++) { 
      var name = this.attributes[c].name.slice(5); 
      if ("data-"+name == this.attributes[c].name) { //is this lined up for conversion? 
       this.setAttribute(name, this.attributes[c].value); 
      } 
     } 
    } 
}); 
}

來源

2013-02-27 15:10:33

css文件總是加載儘管未能滿足媒體查詢

回答

相關問題