为什么 srcset 在 MacBookPro 上不能正常工作（或者可能是视网膜显示器导致的？）

发布于 2025-01-12 20:32:07 字数 2271 浏览 5 评论 0原文

首先，在提问之前，我已经阅读了很多关于响应式图像和srcset的文章，所以我确信演示的代码绝对正确，但结果并不符合预期。

我们可以打开MDN Demo 用于测试。让我们关注下面的部分 html 代码：

<img srcset="elva-fairy-480w.jpg 480w,
              elva-fairy-800w.jpg 800w"
      sizes="(max-width: 600px) 480px,
            800px"
      src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

在我的带有内置显示器的 MacBookPro 2018 上，无论我设置了多少宽度，它总是加载 elva-fairy-800w.jpg >

如果文档宽度小于 600px，则应加载 elva-fairy-480w.jpg。

我做了很多关于媒体查询、视口元编辑的测试，但没有任何改变。

上面的测试我只是注意到 srcset 不能正常工作，但是 picture 和另一个我制作了新的

/index.html" rel="nofollow noreferrer">带有 css 媒体查询的演示工作正常（在我的演示中最后，我将我的演示发送给我的朋友，一切都很顺利，我们之间的不同之处在于计算机或显示器。

之后我连接了一个外接显示器（1080p），神奇的事情发生了，结果没问题！

所以我很困惑，为什么macbookpro工作不好，是视网膜引起的吗？

更让我惊讶的是，我将浏览器从外接显示器拖到macbookpro显示器上，同时打开了chrome devtool网络面板。我们可以看到一个新的请求elva-fairy-800w.jpg。

我在youtube上上传了一个视频：srcset 无法正常工作，你可以在视频中看到它。

顺便说一句，如果我使用模拟设备进行测试也很好。

那么为什么macbookpro会出现srcset问题呢？

我读过的内容：

原文

First of all, before asking, I have read lots of articles about responsive images and srcset, so I am sure the codes with demo absolutely correct, but result does not as expect.

We can open MDN Demo for testing. And let's keep eyes on part of html code below:

<img srcset="elva-fairy-480w.jpg 480w,
              elva-fairy-800w.jpg 800w"
      sizes="(max-width: 600px) 480px,
            800px"
      src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

On my MacBookPro 2018 with internal monitor, Whatever the width I have set any, it always load elva-fairy-800w.jpg

If document width less than 600px, it should load elva-fairy-480w.jpg.

I have do lots of test about media queries, viewport meta edited, but nothing changed.

Above tests I just notice that srcset not working normally, but picture and another what I have made a new demo with css media queries works fine(In my demo, if width set < 600px, body font color changes to red)

At last, I send my demo to my friend, everything goes well, different between us is the computer, or monitor.

After that I connect a external monitor(1080p), amazing things happened, the result is ok!

So I am confused about, why macbookpro not work good, is it retina caused?

What make me surprised more is, I drag browser form external monitor to macbookpro monitor, with chrome devtool network pannel opened. We can see a new request of elva-fairy-800w.jpg.

I upload a video on youtube: srcset not work properly, you can see it in the video.

By the way, if I do tests with Emulated Devices also good.

So why macbookpro has srcset problem?

What I have read:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゞ花落谁相伴 2025-01-19 20:32:07

是视网膜引起的吗？是的。

视网膜最常见的像素密度是 2 倍，这意味着每英寸的像素数是 2 倍。这就是您的 MacBook 加载较大图像的原因。（参见 https://www.listrak.com/blog/responsive-design-视网膜图像）

回复收藏 0 原文

此生挚爱伱 2025-01-19 20:32:07

你没有弄清楚逻辑像素和CSS像素之间的区别。本例中应使用 2x 图。试试这个：

<img
  srcset="elva-fairy-960w.jpg 960w, elva-fairy-1600w.jpg 1600w"
  sizes="(max-width: 600px) 480px, 800px"
  src="elva-fairy-1600w.jpg"
  alt="Elva dressed as a fairy"
>

You didn't figure out the difference between logical pixels and css pixels. 2x graph should be used in this example. Try this:

<img
  srcset="elva-fairy-960w.jpg 960w, elva-fairy-1600w.jpg 1600w"
  sizes="(max-width: 600px) 480px, 800px"
  src="elva-fairy-1600w.jpg"
  alt="Elva dressed as a fairy"
>

回复收藏 0 原文

~没有更多了~