Polyfill for enquire.js in wordpress

Polyfill for enquire.js in wordpress

本文关键字：in wordpress js enquire for Polyfill      更新时间：2023-09-26

我正在尝试在我的Wordpress安装中使用Enquire.js。我只是尝试将左列推到小屏幕的中央列下方。

我让它在我的笔记本电脑的大多数浏览器中工作，但它不适用于较旧的 Android 浏览器 （2.2），说它需要一个填充物。我试图让这个填充物工作，但仍然没有在 Android 上获得功能，我仍然收到有关 android 控制台中匹配媒体填充物的警告。

请帮助我查明可能出现的问题。基本上，我在函数中加载了几个脚本.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，它应该填充媒体匹配 （media.match.js 在同一个文件夹中）：

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

reorder.js（下面），它实际上使用查询.js也在同一文件夹中： 

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

如果我正确理解您的情况，那么它可能与时间问题有关，即在media.match.js之前加载了查询.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。

相关文章：