iPhone이 max-width: 100%와 호환되지 않는 이유는 무엇입니까?

Question

웹 브라우저에서 압축을 풀고 Android 휴대전화에서 사용하면 100% 완벽하게 작동합니다. 하지만 아이폰에서는 그렇지 않습니다.

이미지의 경우 일반적으로 max-width: 100%;를 사용하고, 적절한 경우 width: 100% 또는 img-반응형을 사용합니다. 이미지 너비가 600px보다 크므로 더 큰 장치에서 제어하기 위해 너비를 600px로 설정했습니다.

<section class='section20'>
<그림 클래스="이미지">
<img src="images/user-content/1/20221003160546.jpg">
</그림>

<p>CSS:</p>
<pre class="brush:php;toolbar:false;">.section20 .image,
.section20 img {
너비: 600px !중요;
최대 너비: 100% !중요;
}

!important를 추가하든 안 추가하든 상관없습니다. 서식 편집기는 CKEditor 5입니다. 코드에서 클래스를 다룰 때는 매우 엄격합니다. 코드 보기에 사용자 정의 클래스를 추가하면 형식이 지정된 편집기 보기로 돌아갈 때 Figure에서 해당 클래스가 제거됩니다.

<그림 클래스="이미지">
<그림 클래스="image my-custom-class">

custom-class가 삭제됩니다.

Answer 1

너비와 높이를 하드코딩하지 마세요. rem 또는 vw/vh를 사용하십시오(권장).

으아악

는 이 요소의 높이가 뷰포트 높이의 100%와 같다는 것을 의미합니다.

Answer 2

선택기를 확인하세요.

.section20 .image指定img包装器保持在600px，并且不会随max-width: 100%;를 사용하여 크기를 조정하세요.

대신 .image img을 사용하세요.

으아악 으아악