1

在我使用 Twitter Bootstrap 的响应式 WordPress 主题中，我正在尝试使用类似于CSS 条件加载但依赖 PHP 而不是 Javascript 的技术来最小化如此多的请求加载。

我想做的是使用 PHP 来检测:after伪元素内容属性，以根据浏览器的媒体查询/视口大小查看正在加载的元素。

这是示例 CSS：

    body:after { 
        display: none; 

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

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

具体来说，如果 PHP 可以检测到content: "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 回答