Question

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

因此，一旦视口宽度低于767px，我希望图像源更改为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()) {}？

谢谢！ /编辑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'); ?> 再次，它适用于平板电脑！这是什么问题？

谢谢！

/编辑2

Answer 1

PHP并不了解有关客户端的大量信息，它无法直接了解视口大小。有些解决方案是通过javascript存在的，但只有在您的页面呈现时才执行javascript，因此对于您的情况来说太迟了。

解决方案1（服务器端）：

也许您可以使用用户代理来检测设备：移动设备，平板电脑或桌面设备。

查看此库：http://mobiledetect.net/

修改你需要包括库：在Wordpress中，我不记得，但如果你需要很多文件，可以将它包含在functions.php中（我认为这个文件在任何地方使用，但不确定）。否则，直接将其包含在模板中并不算太糟糕。您也可以创建一个实用程序函数，以获取图像后缀，并在所有模板中使用它。

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

示例（图像不存在，它是一个例子）使用浏览器扩展模拟不同的设备，例如＆＃34;用户代理切换器＆＃34;。您将看到有关检测到的设备大小的图像不同。 http://runnable.com/VCKLbhpxfTgE9QGe/image_by_device_size-for-php-and-mobile_detect

<强> /修改

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

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

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

1 个答案:

解决方案1（服务器端）：

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