具有屏幕宽度条件的PHP

Question

如果屏幕宽度小于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脚本吗？

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

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;
    }
}

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

Answer 2

我想你可以从使用51Degrees PHP解决方案中受益。 它本质上是一个设备检测器，它使用用户代理字符串，以便将设备与数据库文件中的设备进行匹配。 它可以作为Wordpress插件使用 ，可以通过管理面板进行配置。

您可以使用此插件设置规则，为具有所需屏幕大小的设备提供不同的主题。 您可以使用许多不同的组合设置任意数量的规则。 使用基本设备信息，您可以选择50多种设备属性：

通过这种方式，您可以提供不同的主题，无需进行任何编码即可显示移动设备的帖子（您可以提供完全不同的主题或复制当前主题，但将帖子数量更改为5）。 如果您不想在Wordpress中添加插件，可以通过从sourceforge下载检测器并在主题中添加以下代码行来添加相同的功能：

<?php
//Add device detector to project.
require_once 'path/to/core/51Degrees.php';
require_once 'path/to/core/51Degrees_usage.php';

//Use information about device.
if ($_51d['ScreenPixelsWidth'] == 400)
{
     query_posts('posts_per_page=5');
}
?>

希望这可以帮助。