Pourquoi l'iPhone n'est-il pas compatible avec la largeur maximale : 100 % ?

Question

Dans mon navigateur Web, s'il est zippé et sur mon téléphone Android, 100 % fonctionne parfaitement. Mais ce n’est pas le cas sur iPhone.

Pour les images, j'utilise généralement max-width : 100 % ; et, le cas échéant, width : 100 % ou img-responsive. La largeur de l'image est supérieure à 600 px, j'ai donc défini la largeur sur 600 px pour contrôler les appareils plus grands.

<section class='section20'>
<figure class="image">
<img src="images/user-content/1/20221003160546.jpg">
</figure>
</section></pré>
<p>CSS :</p>
<pre class="brush:php;toolbar:false;">.section20 .image,
.section20 img {
largeur : 600px !important;
largeur maximale : 100 % !important ;
}</pré>
<p>Cela ne fait aucune différence que vous ajoutiez !important ou non. L'éditeur de formatage est CKEditor 5. C'est très strict lorsqu'il s'agit de classes dans votre code. Si vous ajoutez une classe personnalisée en mode code, elle sera supprimée de la figure lorsque vous reviendrez à la vue de l'éditeur formaté. </p>
<pre class="brush:php;toolbar:false;"><figure class="image">
<figure class="image ma-classe-personnalisée">

la classe personnalisée sera supprimée.

Answer 1

Ne codez pas en dur la largeur et la hauteur. Utilisez rem ou vw/vh (recommandé).

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

signifie que la hauteur de cet élément est égale à 100% de la hauteur de la fenêtre.

Answer 2

Vérifiez vos sélecteurs.

Utilisez .section20 .image指定img包装器保持在600px，并且不会随max-width: 100%; pour redimensionner.

Utilisez plutôt .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>