具有屏幕宽度条件的 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 bool 值传递到 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;
    }
}

这些将在视口(viewport)匹配的设备上隐藏除前五个帖子之外的所有帖子。但是你必须适本地考虑分页。