Warum ist das iPhone nicht mit max-width: 100 % kompatibel?

Question

In meinem Webbrowser, wenn es komprimiert ist, und auf meinem Android-Telefon funktioniert es zu 100 % perfekt. Aber nicht so auf dem iPhone.

Für Bilder verwende ich normalerweise max-width: 100 %; und gegebenenfalls width: 100 % oder img-responsive; Die Bildbreite ist größer als 600 Pixel, daher habe ich die Breite zur Kontrolle auf größeren Geräten auf 600 Pixel eingestellt.

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

CSS:

.section20 .image,
.section20 img {
Breite: 600px !important;
maximale Breite: 100 % !important;
}

Es macht keinen Unterschied, ob Sie !important hinzufügen oder nicht. Der Formatierungseditor ist CKEditor 5. Beim Umgang mit Klassen in Ihrem Code ist es sehr streng. Wenn Sie in der Codeansicht eine benutzerdefinierte Klasse hinzufügen, wird diese aus der Abbildung entfernt, wenn Sie zur formatierten Editoransicht zurückkehren.

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

custom-class wird gelöscht.

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>