如何防止 iOS 上的浏览器调整图像大小？
Posted
技术标签:
【中文标题】如何防止 iOS 上的浏览器调整图像大小？【英文标题】：How to prevent browsers on iOS from resizing images? 【发布时间】：2022-01-19 22:29:36 【问题描述】：我有一个非常简单的网站，它使用 CSS 网格布局在垂直图库中显示图像（每行一个图像）：
.gallery
display: grid;
grid-template-columns: 1fr;
grid-auto-rows:minmax(375px, auto);
row-gap: 450px;
padding-top: 100px;
.gallery-image
display: flex;
align-items: center;
justify-content: center;
header
display: flex;
justify-content: center;
padding-bottom: 3vw;
在我的 html 中，我有一个备用的小图像，当视口宽度为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>ios viewport test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Testing!</h1>
</header>
<main>
<div class="gallery">
<div class="gallery-image">
<img srcset="https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 356w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1024w"
sizes="(max-width: 1199px) 356px,
1024px"
>
</div>
</div>
</main>
</body>
</html>
将桌面上的浏览器窗口大小调整到 1200 像素以下时，小图像会按预期显示。当我在我的 iPhone 上加载它时（在 Safari 15.1 或 Firefox 40.1 中；浏览器视口宽度 375px，DPR 2），较大的 1024px 图像被加载并缩小以适应视口的 375px 逻辑宽度。
我尝试过的
标准的解决方案似乎是使用<meta name="viewport" content=[...]> 将视口设置为显示的大小。我不确定这是否会使用实际显示尺寸（750 像素）或逻辑尺寸（375 像素），但无论哪种情况，HTML 中的媒体查询条件都应该匹配，显示较小的图像。但事实并非如此。
我遵循了我在博客和类似 SO 问题上找到的其他一些建议：在视口 meta 标记中设置 user-scalable 关闭，或设置 shrink-to-fit=no。据说这两个标签在最近版本的 Safari 中都没有效果，也没有解决我的问题。
Safari 中的“我的页面缩放”设置为 100%。
对可能发生的事情有什么想法，以及解决/解决问题的正确方法吗？
【问题讨论】：
【参考方案1】：当宽度为 356px 到 1023px 时，将显示第一张图片。否则会显示第二张图片。
<div class="gallery">
<div class="gallery-image">
<img srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1023w,
https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 1024w"
sizes="(max-width: 1199px) 356px,
1024px"
>
</div>
</div>
【讨论】：
这对我来说不起作用。但是将 srcset 部分更改为<img srcset="https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 1023w, https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1024w" sizes="(max-width: 1199px) 356px, 1024px" 确实可以使其按预期工作。你能解释一下它是如何工作的吗？根据 srcset 属性的 Mozilla 文档：“指定的宽度必须是正数、非零整数，并且必须与引用图像的固有宽度相匹配。”
sizes 属性决定了选择哪个图像。在这种情况下，我将大小更改为 1023w。因此它涵盖了从 356 到 1023w 的设备尺寸，并为这些设备选择了第一个图像。如果设备大小为 1024w，它将选择第二张图像。你可以在这里阅读完整的文档：developer.mozilla.org/en-US/docs/Learn/HTML/…【参考方案2】：
我在另一个 SO 问题上发现了以下评论：
浏览器会将sizes属性的值乘以 从宽度列表中选择之前的设备像素比 srcset 属性。
这解释了为什么原始尺寸与 srcset 宽度不匹配。如下更改我的img 标签后，iOS 上的 Safari 和 Firefox 中都加载了正确的（较小的）图像：
<img srcset="https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 356w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1024w"
sizes="(-webkit-min-device-pixel-ratio: 2) 178px,
(max-width: 1199px) 356px,
1024px"
>
【讨论】：
以上是关于如何防止 iOS 上的浏览器调整图像大小？的主要内容，如果未能解决你的问题，请参考以下文章
使用 css 防止或禁用 div 中的自动图像调整大小（使用引导程序）
iPhone Mail 在 html 电子邮件中调整图像/div 的大小