具有屏幕寬度條件的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');
}
?>

希望這可以幫助。