php - この条件付き css 関数でマークアップのブロックを読み込むには、どの jQuery メソッドを使用する必要がありますか?

Question

WordPress を使用して、ビューポートのサイズに応じて条件付きでコンテンツをロードload()していますが、メソッドをより適切なメソッドに置き換える必要があります。上記のリンクでブラウザのサイズを変更し、ブラウザのサイズに応じてカスタム値が読み込まれるのを確認すると、これがどのように機能するかを確認できます。

CSS の例:

    body:after { 
        display: none; 

        /* Default */
        content: "Mobile";
    }

    @media (min-width: 35em) {
        body:after {
            content: "Desktop";
        }
    }

具体的に言うと、JScontent: "Mobile"がアクティブであることを検出できれば、モバイル コンテンツが読み込まれます。が検出content: "Desktop"されると、デスクトップ コンテンツが読み込まれます。

これが私が使用しようとしているJavaScriptです：

$(function() {
    var currentSize = "Mobile";
    $(window).resize(function() {
        var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

        /* Ridiculous thing to deal with inconsistent returning of
        value from query. Some browsers have quotes some don't */
        size = size.replace(/"/g, "");
        size = size.replace(/'/g, "");

        if (size != currentSize) {
            if (size == 'Desktop') {
               $(".content").load('file.php');
               currentSize = 'Desktop';
            }
        }

    }).resize();

}

load()私は、その方法が私がやろうとしていることには適していないことに気付きました。カスタムフックでブロックをロードするにはどうすればよいですか?

モバイル版のコードを置き換えるためにデスクトップ版に挿入したいコードの例を次に示します。

    <div class="item">
        <h2 class="nav-tab">One</h2>
        <?php the_block('One'); ?>
    </div>
    <div class="item">
        <h2 class="nav-tab">Two</h2>
        <?php the_block('Two'); ?>
    </div>
    <div class="item">
        <h2 class="nav-tab">Three</h2>
        <?php the_block('Three'); ?>
    </div>

ご覧のとおり、より多くのマークアップとコードを含む 3 つのカスタム フックがあります。これを JavaScript に適切にロードして、モバイル バージョンのコードを置き換える方法がわかりません。