具有屏幕宽度条件的 PHP

Question

如果屏幕宽度小于 480 像素（移动设备，响应式），我会尝试限制我在 Wordpress 上的帖子。

但是我遇到了问题，因为我发现您不能使用 PHP 来检测屏幕宽度，这是我需要的，因为我使用 PHP 来调整帖子编号。我希望是这样的：

<?php /* Start the Loop */ ?>
<?php if media-screen < 480px {
    query_posts('posts_per_page=5'); } ?>
<?php while (have_posts()) : the_post(); ?>

有什么建议？你能以某种方式将一个 css/javascript 布尔值传递到 php 脚本中吗？

编辑：我宁愿不将访问者重定向到移动网站，因为这超出了我的范围。

Answer 1

我不是这个解决方案的粉丝，但您可以简单地添加一个元素，其中包含您想要在移动设备上显示的帖子数量，默认情况下该元素是隐藏的，并且仅在满足媒体查询条件时才显示。

想象一下包含您的移动帖子的以下 html

<div class="is-mobile">
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
</div>
<div class="is-default>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
    <div class="im-a-post">some content</div>
</div>

通过一个简单的媒体查询，您可以切换包装元素的可见性：

.is-mobile {
    display: none;
}
@media (max-width: 480px) {
    .is-default {
        display: none;
    }
    .is-mobile {
        display: block;
    }
}

一种更复杂（并且更好）的方法是通过 javascript/php 甚至 CSS3:nth-child()选择器注释您想要隐藏的元素（通过添加类）。想象一下下面的javascript循环

// assuming jQuery
$(".posts").each(function(idx, ele) {
    if (idx >= 5) {
        $(ele).addClass("hidden-mobile");
    }
});

使用这个 CSS

@media (max-width: 480px) {
    .hidden-mobile {
        display: none;
    }
}

这些将在视口匹配的设备上隐藏除前五个帖子之外的所有帖子。但是，您必须正确考虑分页。