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 plugin提供，可以通过管理面板进行配置。

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

51Degrees Wordpress admin page showing rule creation with additional properties

通过这种方式，您可以提供不同的主题，无需进行任何编码即可显示移动设备较少的帖子（您可以提供完全不同的主题或复制当前主题，但将帖子数量更改为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;
}

具有屏幕宽度条件的PHP

3 个答案: