Why is iPhone not compatible with max-width: 100%?

Question

In my web browser, if zipped and on my Android phone, 100% works perfect. But not so on iPhone.

For images, I usually use max-width: 100%;, and if appropriate, width: 100%; or img-responsive. The image width is larger than 600px, so I set the width to 600px to control on larger devices.

<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;
}

It makes no difference whether you add !important or not. The formatting editor is CKEditor 5. It's very strict in how it handles classes in your code. If you add a custom class in code view, it will remove it from the figure when you return to the formatted editor view.

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

custom-class will be deleted.

Answer 1

Don't hardcode width and height. Use rem or vw/vh (recommended).

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

means that the height of this element is equal to 100% of the viewport height.

Answer 2

Check your selectors.

Specify the img wrapper using .section20 .image to stay at 600px and will not change with max-width: 100%; while resizing.

Use .image img instead.

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

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