Polyfill для enquire.js в WordPress

Question

Я пытаюсь использовать Enquire.js в моей установке Wordpress. Я пытаюсь просто нажать левую колонку под центральной колонкой для маленьких экранов.

Я получил его для работы в большинстве браузеров моего ноутбука, но он не работает в старых браузерах Android (2.2), говоря, что он нуждается в polyfill. Я пытался заставить этот polyfill работать, но все еще не получаю функциональность на Android, я все еще получаю предупреждение о matchmedia polyfill в консоли Android.

Пожалуйста, помогите мне точно определить возможные проблемы. В основном, я загружаю пару скриптов в function.php:

function rr_scripts() {
  wp_enqueue_script( 'polyfill', get_stylesheet_directory_uri() . '/js/polyfill.js', array( 'Modernizr' ), '1.0.0', true );
  wp_enqueue_script( 'enquire', get_stylesheet_directory_uri() . '/js/enquire.js', array( 'jquery' ), '1.0.0', true );
  wp_enqueue_script( 'reorder', get_stylesheet_directory_uri() . '/js/reorder.js', array( 'enquire' ), '1.0.0', true ); 
} 
add_action( 'wp_enqueue_scripts', 'rr_scripts' );

Затем в моем дочернем шаблоне есть папка js с несколькими файлами polyfill.js, которые должны заполнить mediamatch (файл media.match.js находится в той же папке):

Modernizr.load([
{
    test: window.matchMedia,
    nope: "media.match.js"
} ]);

reorder.js (ниже), который на самом деле использует enquire.js, который также находится в той же папке:

jQuery(document).ready(function() {
   enquire.register("screen and (max-width: 599px)", {
       match: function() { jQuery('#leftside').insertAfter('#primary'); },
       unmatch: function() { jQuery('#leftside').insertBefore('#primary'); }
   }); 
});

Answer 1

Если я правильно понимаю ваш сценарий, то это может быть связано с проблемой синхронизации, то есть enquire.js загружается до media.match.js. Я не уверен как .wp_enqueue_script() работает, но вы можете попробовать следующее (на основе этого комментария:

Modernizr.load([{
    // First test requirement for .matchMedia() polyfill
    test: window.matchMedia,
    nope: 'media.match.min.js'
  }, {
    // ...and then load enquire.js
    load: 'enquire.min.js',
    complete: function() {
      enquire.register(...);
    }
  }
]);

Примечание: enquire.js не зависит от jQuery.