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

@media only screen and (min-width: 10em) { 
    body:after { 
     content:'laptop'; 
     display:none; 
    } 
} 

이 작동해야하고, 내 홈페이지에 수행하지만 다른 페이지가 작동하지 않습니다. 스크립트가 확실히로드 중입니다.

여기가 fiddle

내가 생각할 수있는 유일한 문제는, 내가 대기열 '내 스크립트를 해요 방법 아마도입니다. 왜 확신 할 수 없지만 일부 CDN 캐싱을 중지하기 위해 tilemtime()을 설정하기 시작했을 때이 문제가 발생했다고 생각합니다. 나는 왜 그들이 모두 잘 나타나기 때문에 왜지 모르겠다. 코드의 블록 죄송합니다

:

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';