时间戳

首页 > 解决方案 > 手机srcset结果不一致

responsive-images - 手机srcset结果不一致

问题描述

关于 srcset 的另一个问题不起作用，但我已经在这里解决了无数问题，其中大多数似乎是“在私人窗口中打开你的测试”或“srcset 在该浏览器中不起作用”类型的响应。

我已经检查了上述两项，但仍然无法让我的移动肖像图像始终如一地加载。

我在 FF 中工作，如果我将窗口缩小到小于 769 像素，它会正确显示。如果我使用开发工具来模拟移动它不会。最重要的是，如果我在 FF 中打开手机上的 codepen - 它也不会显示肖像图像。Chrome 上的类似结果。

我犯了一个愚蠢的语法错误吗？

所以这里是：

<img class="" 
     srcset="
        https://via.placeholder.com/780x520/91b9c7?text=Standard+Desktop 780w, 
        https://via.placeholder.com/365x520/c49055/3e7a23&text=Mobile+Portrait 365w,
        https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop 1560w"
     sizes="
        (max-width: 768px) 365px,
        (max-width: 768px) and (orientation: portrait) 365px,
        (min-width: 769px) and (orientation: landscape) 780px,
        (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) 1560px,
        (min-resolution: 2dppx) and (orientation: landscape) 1560px,
        365px"
     alt="alt text here">

这是一个codepen：https ://codepen.io/chrisby34/pen/gObyQZy

标签： responsive-imagessrcset

解决方案

不直接回答我自己的问题，而是通过使用图片标签找到解决方案。

<picture class="" >
     <source media="(max-width: 768px)" srcset="https://via.placeholder.com/780x520/91b9c7?text=Standard+Desktop">
      <source media="(min-width: 769px) and (orientation: landscape)" srcset="https://via.placeholder.com/365x520/c49055/3e7a23&text=Mobile+Portrait">
      <source media="(-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)" srcset="https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop">
      <source media="(min-resolution: 2dppx) and (orientation: landscape)" srcset="https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop">
     <img src="low-res.jpg" alt="alt text here">
 </picture>

推荐阅读