iOS의 Iframe 크기: Safari의 크기 조정 이상 문제 수정
특정 시나리오에서는 과도한 콘텐츠가 포함된 iframe이 iOS 기기에서 잘못 표시될 수 있습니다. 콘텐츠 오버플로 및 스크롤을 허용하는 다른 브라우저와 달리 iOS의 Safari는 콘텐츠에 맞게 iframe 크기를 자동으로 조정합니다.
이 동작은 CSS를 통해 iframe 크기를 제어하려는 의도를 무시합니다. 이 문제를 해결하고 플랫폼 전체에서 일관된 iframe 크기를 보장하려면 해결 방법을 구현해야 합니다.
해결책: Overflow Containment
특정 CSS가 포함된 추가 div 요소를 추가합니다. 속성을 사용하면 iframe이 의도한 크기를 유지하고 오버플로 스크롤을 활성화하도록 할 수 있습니다. 수정된 HTML 코드는 다음과 같습니다.
<code class="html"><div class="frame_holder"> <div class="wrapper"> <iframe class="my_frame"> // The content </iframe> </div> </div></code>
그리고 해당 CSS는 다음과 같습니다.
<code class="css">.frame_holder { position: absolute; top: 50px; bottom: 50px; left: 50px; right: 50px; background: #ffffff; } .wrapper { overflow: auto; -webkit-overflow-scrolling: touch; } .my_frame { width: 100%; height: 100%; border: 1px solid #e0e0e0; }</code>
.wrapper div는 래핑 div 내에서 세로 스크롤을 가능하게 하는 Overflow: auto;를 도입합니다. webkit-overflow-scrolling: touch;는 iOS 기기의 스크롤 성능을 최적화하는 웹킷 관련 속성입니다.
이 해결 방법을 사용하면 iframe의 크기가 유지되어 iOS와 iOS 모두에서 일관되고 적절한 사용자 환경을 제공합니다. iOS가 아닌 기기.
위 내용은 iOS Safari에서 Iframe 크기 조정 문제를 해결하는 방법: 일관된 표시를 위한 해결 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!