移动设备图像的不同宽度 - PHP

Question

下面您会看到，如果不是移动设备，我正在尝试为我的图片添加 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>';
        }
    }
}

Answer 1

在 php 文件中回显 html 是一个坏主意，无论是为了可读性和调试。使用 inline css is also not a good thing. I would honestly recommend using media queries 而不是使用移动检测，因为它不是 100% 准确（它无法识别某些手机，您必须保持最新状态）。综上所述，您是否正在尝试 "increase" 40% 宽度到 100% 宽度的图像？宽度不可能超过 100%。你可以尝试用"woocommerce-product-gallery"class增加周围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，然后相反。

Answer 2

我认为您选择了一个糟糕的解决方法 problem.the 最好的方法是使用 css（媒体查询）。您不能在 html 标签宽度中使用“%”。

Answer 3

width 作为 img 标签内的一个属性总是有一个以像素为单位的值（它写的时候没有像素，就像数字一样），所以你写的方式是行不通的.

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

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

Answer 4

是的，通过简单地在 CSS 中声明大小调整选项即可解决此解决方案。请记住，也可以在 php 内添加 class 到您添加的图像，以进一步促进此 CSS 声明

移动设备图像的不同宽度 - PHP

Different Width for Image if Mobile - PHP

php

wordpress

media-queries

woocommerce