根据视口宽度将图像源更改为自定义字段值

Question

我目前的主页滑块图像源设置如下：src="<?php the_field('slider_foto'); ?>"，这在我的 front-page.php 中效果很好。 这些图像的尺寸为 1600x500 像素，这对于大屏幕来说非常有用，但是一旦低于 767 像素视口尺寸，滑块的宽度就会比屏幕尺寸小。

因此，一旦视口宽度低于 767 像素，我希望图像源更改为 src="<?php the_field('slider_foto_mobile'); ?>"。我发现这篇文章给了我一个开始：Change image source based on viewport width

但我不知道如何为函数中的图像 src 实现预定义的<?php the_field(); ?>。 有人可以帮我解决这个问题吗？

谢谢！

编辑 1 我发现我将使用 Mobile Detect 来解决这个问题，但是我在实现它时遇到了问题。我将 php 文件复制到主题的根目录，接下来我需要做什么？我是否需要将其包含在我的functions.php中： require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; 我坚持要做什么，我不明白。 我是否也需要在functions.php中调用这样的东西？ $detect->isMobile(); $detect->isTablet(); 然后在我的front-page.php中使用它？ if ($detect->isMobile()) {}?

谢谢！ /EDIT 1

编辑 2 我现在有了这是我的front-page.php，因为那是我唯一使用它的地方。我的文件是这样开始的：

<?php get_header(); ?>

<?php
  require_once 'Mobile_Detect.php';

  $detect = new Mobile_Detect;
?>

在页面下方一点我执行以下操作：

<?php if ( $detect->isMobile() && $detect->isTablet() ) { ?>
    <img class="carousel-image" src="<?php the_field('slider_foto_mobile'); ?>" alt="<?php the_title(); ?>">
<?php } else { ?>
    <img class="carousel-image" src="<?php the_field('slider_foto'); ?>" alt="<?php the_title(); ?>">
<?php } ?>

我在 iPad 上工作，它区分了 src，但在 iPhone（可能还有其他所有手机）上，它仍然显示 <?php the_field('slider_foto'); ?> 而不是 <?php the_field('slider_foto_mobile'); ?> 同样，它适用于平板电脑！什么问题？

谢谢！

/EDIT 2

Answer 1

PHP 不知道很多关于客户端的信息，它不能直接知道视口的大小。一些解决方案通过 javascript 存在，但 javascript 仅在您的页面被渲染时执行，所以对于您的情况来说太晚了。

方案一（服务器端）：

也许您可以使用用户代理来检测设备：移动设备、平板电脑或台式机。

看看这个库：http://mobiledetect.net/

编辑 您需要包含该库：在 Wordpress 中，我不记得了，但如果您在很多文件中需要它，可能会将它包含在 functions.php 中（我认为这个文件到处都在使用，但不确定）。否则，直接将其包含在模板中也不错。 您也可以创建一个实用函数来获取图像后缀，并在所有模板中使用它。

require 'Mobile_Detect.php';
// ...
function getImageSuffixByDevice(){
    $suffix = '';
    // ... your code to create the suffix you want ...
    return $suffix;
}

示例（图片不存在，只是示例） 使用浏览器扩展来模拟不同的设备，例如“用户代理切换器”。 您会看到图像与检测到的设备尺寸不同 . http://runnable.com/VCKLbhpxfTgE9QGe/image_by_device_size-for-php-and-mobile_detect

/编辑

解决方案 2（客户端，更复杂）：

延迟加载图像，并使用 ajax 来完成。 例如：首先，您显示带有假图像或类似内容的页面。 之后，JS 获取视口大小并从服务器调用图像，传递视口大小。服务器将能够以正确的大小返回图像。