【问题标题】：How to prevent browsers on iOS from resizing images?如何防止 iOS 上的浏览器调整图像大小？
【发布时间】：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"
               alt="Just testing.">
        </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%。

对可能发生的事情有什么想法，以及解决/解决问题的正确方法吗？

【问题讨论】：

标签： html ios mobile media-queries

【解决方案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"
               alt="Just testing.">
        </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"
     alt="Just testing.">

【讨论】：