具有屏幕宽度条件的PHP

发布时间：2020-12-13 21:50:23 所属栏目：PHP教程来源：网络整理

导读：如果屏幕宽度小于480px(移动设备,响应),我试图限制我在Wordpress上的帖子. 但是我遇到了问题,因为我发现你不能使用PHP来检测屏幕宽度,这是我需要的,因为我使用PHP来调整帖子号码.我希望有类似的东西： ?php /* Start the Loop */ ??php if media-screen 480p

如果屏幕宽度小于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;
    }
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!