为何iPhone不兼容max-width: 100%？

Question

在我的网络浏览器中，如果压缩并且在我的Android手机上，100%的工作完美。但在iPhone上不是这样。

对于图片，我通常使用max-width: 100%;，如果情况适合，使用width: 100%;或img-responsive。图片宽度大于600px，因此我将宽度设置为600px以在较大的设备上进行控制。

<section class='section20'>
<figure class="image">
<img src="images/user-content/1/20221003160546.jpg">
</figure>
</section>

CSS：

.section20 .image,
.section20 img {
width: 600px !important;
max-width: 100% !important;
}

添加!important或不添加都没有区别。格式化编辑器是CKEditor 5。它在处理代码中的类时非常严格。如果在代码视图中添加自定义类，当返回到格式化编辑器视图时，它将从figure中删除它。

<figure class="image">
<figure class="image my-custom-class">

custom-class会被删除。

Answer 1

不要硬编码宽度和高度。使用rem或vw/vh（推荐）。

.section20 .image,
.section20 img {
width: 35rem ; // 或者输入相应的rem值
max-width: 100vh ; 
}

表示此元素的高度等于视口高度的100%。

Answer 2

检查你的选择器。

使用.section20 .image指定img包装器保持在600px，并且不会随max-width: 100%;而调整大小。

改用.image img。

.image img {
  width: 600px;
  max-width: 100%;
}

<section class='section20'>
  <figure class="image">
    <img src="https://dummyimage.com/600x400/000/fff">
  </figure>
</section>