具有屏幕宽度条件的 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;
    }
}

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

Answer 2

我认为您可能会从使用 51Degrees PHP 解决方案中受益。它本质上是一个设备检测器，它使用用户代理字符串来将设备与数据库文件中的设备进行匹配。它以Wordpress plugin 的形式提供，并且可以通过管理面板进行配置。

您可以使用此插件设置规则，为具有所需屏幕尺寸的设备提供不同的主题。您可以使用许多不同的组合设置任意数量的规则。借助基本设备信息，您可以选择 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');
}
?>

希望这会有所帮助。

Answer 3

将此功能用于移动条件

function is_mobile() {
    static $is_mobile;
    if ( isset($is_mobile) )
        return $is_mobile;
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
    return $is_mobile;
}