srcset 和大小在 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 和 sizes 应该适用于 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
(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 中不起作用？

srcset and sizes not working in safari?

safari

wordpress

responsive-design

srcset

responsive-images