的jQuery我使用的不是探測CSS體：我使用後

Question

一些jQuery來檢測某個媒體查詢是否被觸發，這樣的事情：

jQuery的

var currentSize = "default"; 
var mqCSS = function() { 
    var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content'); 
    size = size.replace(/"/g, ""); 
    size = size.replace(/'/g, ""); 
    return size; 
}; 

function mobile_load_img(obj) { 
    size = obj(); 
    if (size != currentSize) { 
     if (size == 'laptop') { 
       alert('hello'); 
      currentSize = 'mobile'; 
     } 
    } //if size 

} 
mobile_load_img(mqCSS); 

CSS

​​

這應該工作，以及它在我的主頁，但只任何其他頁面這是行不通的。腳本肯定正在加載。

這裏有一個fiddle

我能想到的唯一的其他問題，也許我是如何入隊」我的腳本。我不知道爲什麼，但我認爲這個問題發生在我開始設置tilemtime()來停止某些CDN緩存。我不知道爲什麼，因爲他們都顯得很好。

對不起，我的代碼塊：

PHP

function lart_stylesheets() { 
    if (!is_admin()) { 
     wp_enqueue_style('reset_style', get_stylesheet_directory_uri().'/css/reset.css', 
     array(), 'all'); 
     wp_enqueue_style('base_style', get_stylesheet_directory_uri().'/css/base_style.css', 
     array('reset_style'), '1.0', 'all'); 
    } 
    if (is_home()) { 
     wp_enqueue_style('home-style', get_template_directory_uri().'/css/home.css', array(), filemtime(get_stylesheet_directory().'/css/home.css')); 
    } 
    if (is_single() || is_page('LART TV') || is_category() || is_page('We\'re Wearing') || is_page('archives')) { 
     wp_enqueue_style('single-style', get_stylesheet_directory_uri().'/css/single.css', array(), filemtime(get_stylesheet_directory().'/css/single.css')); 
     wp_enqueue_style('lightbox', get_stylesheet_directory_uri().'/css/lightbox.css', 
     array(), '1.0', 'all'); 
    } 
} 

function lart_front_end_scripts() { 
    wp_deregister_script('jquery'); 
    wp_deregister_script('jquery-migrate.min'); 
    wp_deregister_script('comment-reply.min'); 
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', false, '3.6', true); 
    if (!is_admin()) { 
     wp_register_script('mainJS', get_template_directory_uri().'/js/mainJS.js', array('jquery', 'underscore'), filemtime(get_stylesheet_directory().'/js/mainJS.js'), true); 
     wp_enqueue_script('mainJS'); 
     wp_register_script('hammer', get_template_directory_uri().'/js/hammer.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/hammer.js'), true); 
     wp_enqueue_script('hammer'); 
    } 
    if (is_home()) { 
     wp_register_script('homeJS', get_template_directory_uri().'/js/home.js', array('jquery', 'underscore', 'jquery-masonry'), filemtime(get_stylesheet_directory().'/js/home.js'), true); 
     wp_enqueue_script('homeJS'); 
    } 
    if (is_single() || is_page('LART TV') || is_category() || is_page('We\'re Wearing')) { 
     wp_register_script('singleJS', get_template_directory_uri().'/js/single.js', array('jquery', 'carousel'), filemtime(get_stylesheet_directory().'/js/single.js'), true); 
     wp_enqueue_script('singleJS'); 
     wp_register_script('lightbox', get_template_directory_uri().'/js/lightbox.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/lightbox.js'), true); 
     wp_enqueue_script('lightbox'); 
     wp_register_script('inviewJS', get_template_directory_uri().'/js/inview.js', array('jquery', 'singleJS'), filemtime(get_stylesheet_directory().'/js/inview.js'), true); 
     wp_enqueue_script('inviewJS'); 
     wp_register_script('spinJS', get_template_directory_uri().'/js/spin.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/spin.js'), true); 
     wp_enqueue_script('spinJS'); 
     wp_register_script('carousel', get_template_directory_uri().'/js/carousel.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/carousel.js'), true); 
     wp_enqueue_script('carousel'); 
    } 
    if (is_page('LART TV')) { 
     wp_register_script('lartTVJS', get_template_directory_uri().'/js/lartTV.js', array('jquery', 'jquery-masonry'), filemtime(get_stylesheet_directory().'/js/lartTV.js'), true); 
     wp_enqueue_script('lartTVJS'); 
    } 
    if (is_page('We\'re Wearing')) { 
     wp_register_script('whatwearingJS', get_template_directory_uri().'/js/whatwearing.js', array('jquery-masonry'), filemtime(get_stylesheet_directory().'/js/whatwearing.js'), true); 
     wp_enqueue_script('whatwearingJS'); 
    } 
    if (is_search() || is_page('archives')) { 
     wp_register_script('archiveJS', get_template_directory_uri().'/js/archive.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/archive.js'), true); 
     wp_enqueue_script('archiveJS'); 
     wp_register_script('spinJS', get_template_directory_uri().'/js/spin.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/spin.js'), true); 
     wp_enqueue_script('spinJS'); 
    } 
} //End add_scripts 

有什麼我做錯了排隊」我的腳本和樣式？

也許是時間問題或什麼？

Answer 1

出於某種原因，我沒有得到（也許瀏覽器的懶惰計算），如果display:none;設置，風格不計算（至少在頁面加載），所以你不能通過window.getComputedStyle()訪問它。 我通過簡單的提醒size變量來測試這個。

一種解決方法是在你的風格使用visibility:hidden;：

body:after { 
    content:'laptop'; 
    visibility:hidden; 
} 

Here's a demo，但你應該考慮使用@Bojangles選項，window.matchMedia;它會用這段代碼替換你所有的代碼：

if (window.matchMedia("(min-width: 10em)").matches) 
    currentSize = 'mobile';