如何防止 iOS 上的浏览器调整图像大小？

Question

我有一个非常简单的网站，它使用 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 中，我有一个备用的小图像，当视口宽度小于 1200 像素时应该显示该图像：

<!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>

在桌面上将浏览器 window 的大小调整为低于 1200 像素时，小图像会按预期显示。 当我在我的 iPhone 上加载它时（在 Safari 15.1 或 Firefox 40.1 中；浏览器视口宽度 375px，DPR 2），更大的 1024px 图像被加载并缩小以适应 375px 的逻辑宽度。

我试过的

标准解决方案似乎是使用<meta name="viewport" content=[...]>将视口设置为显示的大小。 我不确定这是否会使用实际显示尺寸（750px）或逻辑尺寸（375px），但无论哪种情况，HTML 中的媒体查询条件都应该匹配，显示较小的图像。 但事实并非如此。

我遵循了我在博客和类似的 SO 问题上找到的其他一些建议：在视口meta标记中设置user-scalable off，或设置shrink-to-fit=no 。 据说这两个标签在最近版本的 Safari 中都没有效果，也没有解决我的问题。

Safari 中的我的页面缩放设置设置为 100%。

关于可能发生的事情的任何想法，以及修复/解决它的正确方法？

Answer 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>

Answer 2

我在另一个 SO 问题上发现了以下评论：

在从 srcset 属性中的宽度列表中进行选择之前，浏览器会将来自 sizes 属性的值乘以设备的像素比。

这解释了为什么原始尺寸与 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.">

如何防止 iOS 上的浏览器调整图像大小？

问题描述

我试过的

2 个解决方案

解决方案1
0 2021-12-16 21:46:58

解决方案2
0 2021-12-17 00:28:35

如何防止 iOS 上的浏览器调整图像大小？

问题描述

我试过的

2 个解决方案

解决方案1 0 2021-12-16 21:46:58

解决方案2 0 2021-12-17 00:28:35

解决方案1
0 2021-12-16 21:46:58

解决方案2
0 2021-12-17 00:28:35