具有屏幕宽度条件的PHP

如果屏幕宽度小于480px(移动设备,响应),我试图限制我在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脚本吗？

编辑：我宁愿不将访问者重定向到移动网站,因为这已经超出了我的联盟.

解决方法:

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

想象一下以下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;
    }
}

这些将隐藏视口匹配的设备上除前五个帖子之外的所有帖子.但是你必须考虑适当的分页.

标签：php,wordpress,responsive-design
来源： https://codeday.me/bug/20190728/1564272.html