检测屏幕宽度以呈现断点的适当图像

Question

所以我知道使用 PHP 获取屏幕宽度是不可能的，但我想看看我可以“检查断点”然后传递适当调用的最干净的方法是什么？

所以我有这个功能：

function get_featured_image($post_id) {
    $thumbnail = get_field('featured_image_mobile', $post_id);
    if (strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'android') && ($thumbnail)) {
        echo '<img src="' . $thumbnail['sizes']['medium'] . '" alt="" class="imagery featured-image-selection"/>';
    } else if (has_post_thumbnail($post_id)) {
        echo '<img src="' . get_the_post_thumbnail_url() . '" alt="" class="imagery featured-image-selection"/>';
    }
}

我正在检查 user_agent 它是否是移动设备并使用 ACF 输出 img src，否则如果它是桌面设备并且有缩略图，请使用它，但它在确定大小方面不是最可靠的因为桌面上的移动视图仍然显示为“桌面”。

有没有一种干净的方法可以检测“断点”，以便我可以使用 $thumbnail['sizes']['medium'] 直到 700px，然后使用 get_post_thumbnail_url() 宽度超过 700px 的任何东西？

Answer 1

我不知道您的目标是不是只使用 PHP，但最简单的方法是使用 CSS。这些是基本的媒体查询，您可以根据需要进行更改。

// For small devices
@media (min-width: 576px) {
    .imagery {
        background-image: url("images/thumbnail-small.jpg");
    }
}
// For medium devices
@media (min-width: 768px) {
    .imagery {
        background-image: url("images/thumbnail-medium.jpg");
    }
}
// For large devices
@media (min-width: 992px) {
    .imagery {
        background-image: url("images/thumbnail-large.jpg");
    }
}
// For larger devices
@media (min-width: 1200px) {
    .imagery {
        background-image: url("images/thumbnail-larger.jpg");
    }
}

我从 Bootstrap's page 那里得到了参考，但是有很多页面和示例。

检测屏幕宽度以呈现断点的适当图像

Detect screen width to render appropriate images for breakpoints

javascript

php

wordpress

advanced-custom-fields