移动端高分辨率屏幕下srcset适配不同图片比例的问题

你的核心问题是需要根据**视口宽度（布局方向）**加载不同比例的图片，而不是单纯根据像素密度或显示宽度——这属于「艺术方向切换」，单纯的srcset+sizes没法完美解决，因为它是为同内容的不同分辨率优化设计的。

具体实现代码： #

<picture>
  <!-- 移动端竖屏：加载高比例图 -->
  <source 
    media="(max-width: 780px)"
    srcset="image-780x550px.jpg 1x, image-1560x1100px.jpg 2x"
    alt="横幅描述"
  >
  <!-- 其他情况（桌面/横屏）：加载宽横幅图 -->
  <source
    srcset="image-2560x400px.jpg 2560w,
            image-1920x450px.jpg 1920w,
            image-1024x500px.jpg 1024w"
    sizes="100vw"
    alt="横幅描述"
  >
  <!-- 降级方案 -->
  <img src="image-1920x450px.jpg" alt="横幅描述">
</picture>

代码说明： #

• <picture>的作用：允许你根据媒体条件指定不同的图片源，优先匹配符合条件的<source>。
• 移动端竖屏规则：当视口宽度≤780px时，加载image-780x550px.jpg（1x DPI）或image-1560x1100px.jpg（2x/3x高DPI设备），确保高分辨率手机也能加载适配的高比例图，不会误选宽横幅的1920px图。
• 桌面/横屏规则：使用srcset+sizes，sizes="100vw"表示图片在页面上占满视口宽度，浏览器会根据当前视口宽度和设备DPI自动选择最合适的宽横幅图（比如4K屏选2560w，Retina屏选对应高分辨率的宽图）。
• 降级<img>：不支持<picture>的旧浏览器会加载这个兜底图片。

为什么之前的代码失效？ #

你之前只使用srcset，没有明确告诉浏览器「不同视口下图片的显示逻辑」——高分辨率手机的物理像素宽度可能超过1024px（比如iPhone 14 Pro的物理宽度是1170px），浏览器会认为需要加载更大的图，所以选了1920w的版本。而<picture>通过媒体查询直接区分了布局场景，从根源上解决了这个问题。

内容的提问来源于stack exchange，提问作者RubbelDeCatc