无法让 srcset 跨设备工作
Cannot get srcset to work cross device
我有一张主要的 header 图片：
<img class="hero" src="/assets/images/Food-Spread-500x167.jpg" alt="banner image" sizes="(min-width: 992px) 80vw, 100vw"
srcset="/assets/images/Food-Spread-500x167.jpg 500w,
/assets/images/Food-Spread-768x256.jpg 768w,
/assets/images/Food-Spread-992x331.jpg 992w,
/assets/images/Food-Spread-1200x400.jpg 1200w">
我遇到的困难是双重的：
您应该将哪个尺寸设置为 src 后备？最大还是最小？ IE 根本不支持 srcset，所以你会留下一个小图像作为你的 header！！ Safari (mac) 也为此苦苦挣扎...
因为没有办法说'n'vw 2x 你如何让它在iphone上工作？ （就像它一样
视网膜 它显然认为它是它的两倍大并拉出一个
图片比要求的大很多）。有什么可以解决的吗？？
提前致谢...
随便选一个吧！您必须在最适合旧版桌面浏览器和最适合旧版移动浏览器的内容之间做出权衡。
您的问题是 Safari 支持 srcset 和 x 描述符，但不支持 w 或 sizes。 sizes 属性被忽略，然后它要么选择 srcset 中的第一个候选作为“1x”，要么忽略 srcset 中的所有候选（取决于 Safari 的版本) 并使用 src 代替。因此，您可能将 500x167 图像呈现为 500 CSS 像素宽，这会溢出（320 CSS 像素宽）视口。
你可以做两件事来解决这个问题（如果你愿意，你可以同时做）：
- 使用 picturefill，它将添加对
w 和 sizes 的支持并进行内部尺寸调整。
- 使用 CSS 设置宽度：
.hero { width:100% }
@media (min-width: 992px) { .hero { width:80% } }
我有一张主要的 header 图片：
<img class="hero" src="/assets/images/Food-Spread-500x167.jpg" alt="banner image" sizes="(min-width: 992px) 80vw, 100vw"
srcset="/assets/images/Food-Spread-500x167.jpg 500w,
/assets/images/Food-Spread-768x256.jpg 768w,
/assets/images/Food-Spread-992x331.jpg 992w,
/assets/images/Food-Spread-1200x400.jpg 1200w">
我遇到的困难是双重的：
您应该将哪个尺寸设置为 src 后备？最大还是最小？ IE 根本不支持 srcset，所以你会留下一个小图像作为你的 header！！ Safari (mac) 也为此苦苦挣扎...
因为没有办法说'n'vw 2x 你如何让它在iphone上工作？ （就像它一样 视网膜 它显然认为它是它的两倍大并拉出一个 图片比要求的大很多）。有什么可以解决的吗？？
提前致谢...
随便选一个吧！您必须在最适合旧版桌面浏览器和最适合旧版移动浏览器的内容之间做出权衡。
您的问题是 Safari 支持
srcset和x描述符，但不支持w或sizes。sizes属性被忽略，然后它要么选择srcset中的第一个候选作为“1x”，要么忽略srcset中的所有候选（取决于 Safari 的版本) 并使用src代替。因此，您可能将 500x167 图像呈现为 500 CSS 像素宽，这会溢出（320 CSS 像素宽）视口。你可以做两件事来解决这个问题（如果你愿意，你可以同时做）：
- 使用 picturefill，它将添加对
w和sizes的支持并进行内部尺寸调整。 - 使用 CSS 设置宽度：
.hero { width:100% } @media (min-width: 992px) { .hero { width:80% } }
- 使用 picturefill，它将添加对