iOS에서 Iframe 크기 조정 문제를 해결하는 방법: CSS 솔루션?

CSS를 사용하여 iOS에서 iframe 크기 조정 문제 극복

iframe이 iOS 기기에서 지정된 프레임 크기를 초과하는 문제가 발생하는 경우 다른 브라우저에서 제대로 작동하려면 이 가이드가 해결책을 제공할 것입니다.

간단히 말해서, iOS Safari는 CSS로 설정된 기존 iframe 크기 조정 제약 조건을 따르지 않아 iframe의 크기가 콘텐츠에 맞게 조정됩니다. 이 문제를 해결하기 위해 오버플로를 조절하는 래핑 div를 사용합니다.

<code class="css"><div class="frame_wrapper">
    <iframe class="my_frame">
        // Content
    </iframe>
</div></code>

다음 CSS 속성이 래퍼 div에 적용됩니다.

<code class="css">.frame_wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Additional CSS styles... */
}</code>

오버플로 속성은 오버플로 처리를 제어합니다. 콘텐츠를 자동으로 설정하면 필요에 따라 스크롤바가 표시됩니다. -webkit-overflow-scrolling 속성은 iOS 기기에만 해당되며 매끄러운 스크롤 경험을 가능하게 합니다.

이 래퍼 div 내에 iframe을 캡슐화하여 오버플로 동작을 제어하고 iOS Safari가 원하는 iframe 크기를 따르도록 지시합니다. . 여기에서 업데이트된 예를 확인할 수 있습니다: http://jsfiddle.net/R3PKB/7/

이 솔루션은 이전 Stack Overflow 토론에서 확인된 것처럼 iOS Safari iframe 처리의 오랜 버그를 해결합니다.

위 내용은 iOS에서 Iframe 크기 조정 문제를 해결하는 방법: CSS 솔루션?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!