Question

由于某些原因，在Safari中查看我的网站时，srcset和大小无法正常工作。它适用于Chrome和Firefox，但在Safari中查看时，它会加载最大的图像，即使我已定义的较小图像也在那里。

我正在使用Wordpress的metabox.io插件，它允许我创建图像元框，我上传的图像是homepage-image-lg的两倍，用于加载视网膜显示。

\d(?=\d{4})

为什么会这样？ Srcset和尺寸应该适用于Safari吗？

图片来源

    <?php 
$homeimage1 = rwmb_meta( 'su_homepage-interior-design', array( 'size' => 'homepage-image-lg' ) );
$interiorDesign = reset($homeimage1); ?>            

                    <img class="scene_element scene_element--fadeinup"  src="<?php echo $interiorDesign['url'];?>" srcset="<?php echo $interiorDesign['srcset']; ?>" 

                    sizes="(max-width:767px) 767px, (min-width: 40.063em) and (min-width: 64em) and (max-width:74.9999em) 787px, (min-width: 75em) 787px, 787px" itemprop="thumbnail" alt="Image description" >

Answer 1

您能否向我们提供$interiorDesign['srcset'];的内容？

sizes中有几个无用的部分：

(max-width:767px) 767px：这意味着当视口小于或等于767px
(min-width: 40.063em) and (min-width: 64em) and (max-width:74.9999em) 787px：(min-width: 40.063em)没用，因为后跟(min-width: 64em)。因此，当视口位于64em和74.9999em之间时，图像宽度为787像素。我们假设根字体大小为16px（not always true），因此64em表示1024px而74.9999em表示1199.99px。当视口位于这两个值之间时，图像宽度为787像素。
(min-width: 75em) 787px：当视口大于或等于1200px时，图像宽度为787像素。
787px：最后，当没有其他媒体查询匹配时（因此当视口位于768px和1023px之间时），图片宽度为787像素

因此，您的图片只能有两种尺寸：767px或787px，而您的sizes属性可能就像这样简单：

sizes="(max-width:767px) 767px, 787px"

但无论如何，这些价值观是如此接近，我认为这可能不是你所需要的。

srcset和大小不适用于safari？

1 个答案: