1

Twitter Bootstrap を使用したレスポンシブ WordPress テーマでは、 CSS 条件付き読み込みに似た手法を使用しようとしていますが、Javascript の代わりに PHP を使用して、非常に多くのリクエストの読み込みを最小化しています。

私がやりたいのは、PHP を使用して:after疑似要素のコンテンツ プロパティを検出し、ブラウザーのメディア クエリ/ビューポート サイズに基づいてどの要素が読み込まれているかを確認することです。

CSS の例を次に示します。

    body:after { 
        display: none; 

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

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

具体的には、PHPcontent: "A"がアクティブであることを検出できる場合、custom_mobile_content()モバイル コンテンツをレンダリングするフックをロードします。を検出すると、より多くのデスクトップ コンテンツをレンダリングするフックcontent: "B"が読み込まれます。custom_desktop_content()

JavaScript バージョンを使用してみましたが、書式設定された HTML の大きなブロックを JavaScript 変数に入れる必要があり、ページのレンダリング時に、JavaScript 内に含まれるページに非アクティブで未使用のテキストの巨大なブロックがあります。PHPの方が適しているようです。

これを簡単に生成できるコードはありますか?

編集:これを機能させるには、JS 変数または関数を PHP に渡す必要があるようですが、それはかなり複雑だと思います。

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

$(function() {
    var currentSize = "A";
    $(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 == 'B') {
               $(".content").load('<?php custom_hook(); ?>');
               currentSize = 'B';
            }
        }

    }).resize();

}

上記のコードは、ファイルにキャッシュする必要がないため、WordPress ページ自体に含めました。このページで一度だけ使用されます。ただし、これの問題は、custom_hook()コードがページにレンダリングされ、そのフックに大量のマークアップが含まれていることです。を使用していると JavaScript が判断した場合、そのAすべてのマークアップは理由もなくソース コード内のページにあります。で使用されていない限り、カスタム フックがレンダリングされないようにする方法を見つけたいと考えていますB。それが理にかなっていることを願っています。

4

1 に答える 1

1

現時点では、JavaScript であっても疑似要素を検出する信頼できる方法はありません。CSS オブジェクト モデル (CSSOM) はありません。PHP はサーバー側でしか機能しないため、この状況でも役に立ちません。

別のワークフローとして、JavaScript を使用して、現在アクティブなメディア クエリを見つけることができます。これに基づいて、必要に応じて他のリソースをロードできます。

JavaScript からメディアクエリを操作する方法の詳細については、MDNのこの記事を参照してください。

于 2012-10-21T18:37:33.630 に答える