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

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，然后使用宽度超过700px的get_post_thumbnail_url()？

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的页面上得到了一个参考，但有很多页面和例子。