0

Wordpress のインストールで Enquire.js を使用しようとしています。小さな画面の場合、左の列を中央の列の下に押し込もうとしています。

ラップトップのほとんどのブラウザーで動作するようになりましたが、古い Android ブラウザー (2.2) では動作せず、ポリフィルが必要です。このポリフィルを機能させようとしましたが、Android で機能を取得できず、Android コンソールで matchmedia ポリフィルに関する警告が引き続き表示されます。

考えられる問題を特定するのを手伝ってください。基本的に、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 テンプレートには、いくつかのファイル polyfill.js を含む js フォルダーがあり、メディアマッチをポリフィルすることになっています (media.match.js は同じフォルダーにあります)。

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

同じフォルダーにある enquire.js を実際に使用する reorder.js (以下):

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

1 に答える 1

0

あなたのシナリオを正しく理解していれば、タイミングの問題に関連している可能性があります。つまり、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 に依存しません。

于 2013-12-05T00:23:59.413 に答える