為何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>