Mengapa iPhone tidak serasi dengan lebar maksimum: 100%?

Question

Dalam penyemak imbas web saya, jika dizip dan pada telefon Android saya, 100% berfungsi dengan sempurna. Tetapi tidak begitu pada iPhone.

Untuk imej, saya biasanya menggunakan lebar maksimum: 100%;, dan jika sesuai, lebar: 100% atau img-responsif. Lebar imej lebih besar daripada 600px, jadi saya menetapkan lebar kepada 600px untuk mengawal pada peranti yang lebih besar.

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

CSS:

.section20 .image,
.section20 img {
lebar: 600px !penting;
lebar maksimum: 100% !penting;
}

Tidak ada bezanya sama ada anda menambah !penting atau tidak. Editor pemformatan ialah CKEditor 5. Ia sangat ketat apabila berurusan dengan kelas dalam kod anda. Jika anda menambah kelas tersuai dalam paparan kod, ia akan mengalih keluarnya daripada angka apabila anda kembali ke paparan editor yang diformatkan.

kelas tersuai akan dipadamkan. 

Answer 1

Jangan kod keras lebar dan tinggi. Gunakan rem atau vw/vh (disyorkan).

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

bermakna ketinggian elemen ini bersamaan dengan 100% ketinggian port pandangan.

Answer 2

Semak pemilih anda.

Gunakan .section20 .image指定img包装器保持在600px，并且不会随max-width: 100%; untuk mengubah saiz.

Gunakan .image img sebaliknya.

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

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