srcset 和 size 在 safari 中不起作用？

Question

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

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

    <?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" >

为什么会这样？ Srcset 和大小应该适用于 Safari 对吧？

图片来源

<img src="/wp-content/uploads/2017/11/interior-design-787x625.jpg" srcset=
  "/wp-content/uploads/2017/11/interior-design.jpg 1574w, /wp-content/uploads/2017/11/interior-design-768x610.jpg 768w, /wp-content/uploads/2017/11/interior-design-792x629.jpg 792w, /wp-content/uploads/2017/11/interior-design-787x625.jpg 787w"
  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时，表示图像为767像素宽
• (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"

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