如果移动，图像的不同宽度 - PHP答案

【问题标题】：Different Width for Image if Mobile - PHP如果移动，图像的不同宽度 - PHP
【发布时间】：2019-12-04 06:27:10
【问题描述】：

您将在下面看到，如果不是移动设备，我正在尝试将 40% width 添加到我的图像中。但是，即使在桌面设备上，图像仍以 100% 的宽度显示。您可以在此处查看此页面：https://www.tattiniboots.com/product/terranova/

这是我正在使用的代码

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
            echo '</div>';
        }
    }
} else {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
            echo '</div>';
        }
    }
}

【问题讨论】：

在您的 PHP 中确实没有理由这样做。您可以在 CSS 中执行此操作并获得相同的结果。

标签： php wordpress woocommerce media-queries

【解决方案1】：

在 php 文件中回显 html 是一个坏主意，无论是为了可读性还是调试。有inline css is also not a good thing。老实说，我会建议使用media queries 而不是使用移动检测，因为它不是 100% 准确的（它无法识别某些手机，并且您必须保持最新状态）。综上所述，您是否试图将 40% 宽度“增加”到 100% 宽度的图像？宽度不能超过 100%。您可以尝试使用“woocommerce-product-gallery”类增加周围 div 的宽度。我还注意到这里的不一致：

if ( !$detect->isMobile() ) {
  ... 
   echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}

看起来它正在检查它是否不是移动的，并添加移动的img，反之则为else。

【讨论】：

【解决方案2】：

我认为您选择了一种不好的方法来解决这个问题。最好的方法是使用 css（媒体查询）。您不能在 html 标签宽度中使用“%”。

【讨论】：

【解决方案3】：

width 作为img 标记内的属性总是有一个以像素为单位的值（它是在没有像素的情况下写入的，就像数字一样），因此您编写它的方式将不起作用。

如果您想将宽度的百分比值作为img 标记的内联属性，您应该使用style 属性。所以你的img 标签应该是这样的：

<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">

【讨论】：

【解决方案4】：

是的，这个解决方案是通过在 CSS 中简单地声明尺寸选项来解决的。请记住，也可以将 php 中的类添加到您添加的图像中，以进一步促进此 CSS 声明

【讨论】：