Polyfill for wordpress中的enquire.js

Question

我正在嘗試在Wordpress安裝中使用Enquire.js。 我正在嘗試僅將左列推到小屏幕的中央列下方。

我可以在筆記本電腦的大多數瀏覽器中使用它，但不能在較舊的Android瀏覽器（2.2）上運行，因為它需要使用polyfill。 我試圖使此polyfill正常工作，但仍未獲得Android上的功能，但仍收到有關Android控制台中matchmedia polyfill的警告。

請幫助我找出可能的問題。 基本上，我在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' );

然后我的Child模板有一個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。