媒体查询 resolution 研究

Lruihao commented 8 months ago

同步研究：自适应图片

Lruihao commented 8 months ago

为什么 mac 和 windows 上对于 img 元素的 srcset 属性处理逻辑不一致？

直接上代码：

<div>
  <h2>url 一样的图片</h2>
  <img 
    loading="lazy" 
    src="https://lruihao.cn/images/avatar.jpg" 
    srcset="https://lruihao.cn/images/avatar.jpg, https://lruihao.cn/images/avatar.jpg 1.5x, https://lruihao.cn/images/avatar.jpg 2x"
    sizes="auto"
    title="Lruihao"
    alt="Lruihao"
  >
</div>

<div>
  <h2>url 不一样的图片</h2>
  <img 
    loading="lazy" 
    src="https://lruihao.cn/images/avatar.jpg" 
    srcset="https://lruihao.cn/images/avatar.jpg?from=1x, https://lruihao.cn/images/avatar.jpg?from=1.5x 1.5x, https://lruihao.cn/images/avatar.jpg?from=2x 2x"
    sizes="auto"
    title="Lruihao"
    alt="Lruihao"
  >
</div>

测试步骤：

复制 html 文件 url -> 打开新标签页 -> 粘贴 url 打开网页 -> 刷新网页 -> 出现差异

在 Mac 上 Chrome 118.0.5993.117 和 Edge 113.0.1774.57 (未更新)，不管设置像素密度为多少，两张图片都有是相同的 CSS 尺寸。

但是，在 Windows 10 上 Chrome 118.0.5993.118 和 Edge 118.0.2088.76 第一次进入时表现和 Mac 一样，再次刷新网页，第一张图片就会变小。

经过 debug 发现图片 url 一样才会出现这种状况，但是始终不知道为什么会出现这种问题，是 Chromium 的 bug 呢还是 Windows 的 bug？

Lruihao commented 8 months ago

经验证似乎不是 mac 和 windows 之间的差异，之所以出现上述差异，是因为 mac 上的像素密度（window.devicePixelRatio）只有 1 和 2 两档，而 windows 上一般默认是 125% 的缩放比，也就是 1.25 的像素密度，在 1 < 像素密度 <= 1.5 的区间内就会出现上诉问题。仍未找到计算策略，问题出现的原因仍未知。

Lruihao / hugo-blog

媒体查询 resolution 研究 #91