iPhone が max-width: 100% に対応していないのはなぜですか?

Question

私の Web ブラウザでは、zip 形式で圧縮されており、Android スマートフォンでは 100% 完璧に動作します。しかしiPhoneではそうではありません。

画像の場合、通常は max-width: 100%; を使用し、必要に応じて width: 100%; または img-sensitive を使用します。画像の幅が 600 ピクセルより大きいため、より大きなデバイスで制御するために幅を 600 ピクセルに設定しました。

<section class='section20'>
<図クラス="イメージ">
<img src="images/user-content/1/20221003160546.jpg">
</図>
</section>

CSS:

.section20 .image,
.section20 img {
幅: 600px !重要;
最大幅: 100% !重要;
}

!重要を追加してもしなくても違いはありません。書式設定エディタは CKEditor 5 です。コード内のクラスの処理方法は非常に厳密です。コード ビューでカスタム クラスを追加すると、書式設定されたエディター ビューに戻ったときに Figure からそのクラスが削除されます。

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

カスタムクラスは削除されます。

Answer 1

幅と高さをハードコーディングしないでください。 rem または vw/vh を使用します (推奨)。

リーリー

は、この要素の高さがビューポートの高さの 100% に等しいことを意味します。

Answer 2

セレクターを確認してください。

.section20 .image を使用して img ラッパーを指定して、600px のままにし、max-width: 100%;# で変更しません。 # # サイズ変更中。

代わりに

.image img を使用してください。

リーリー リーリー