iOS Safari에서 반응형 IFrame이 제대로 작동하도록 하려면 어떻게 해야 합니까?

iOS Safari의 반응형 IFrame

최신 웹에서 반응형 IFrame은 콘텐츠를 웹사이트에 원활하게 통합하는 데 필수적입니다. 이론적으로는 IFrame의 너비를 100%로 설정하면 충분하지만 실제로는 이 접근 방식으로 인해 iOS Safari에서 문제가 발생할 수 있습니다.

문제

IFrame의 콘텐츠가 내부 스크롤 막대를 사용하면 iOS Safari는 IFrame 너비가 100%. 이 동작으로 인해 오버플로된 콘텐츠가 가려질 수 있습니다.

해결책

이 문제를 해결하고 iOS Safari에서 IFrame 응답성을 보장하려면 다음 두 가지 옵션이 있습니다.

옵션 1: IFrame 수정 콘텐츠

IFrame 내의 콘텐츠를 제어하는 ​​경우 오버플로를 사용하여 div의 CSS를 수정합니다. 다음으로 스크롤하세요.

width: 1px;
min-width: 100%;
*width: 100%;

이 기술은 iOS Safari의 기본 동작을 재정의하고 div의 너비를 100%로 강제 설정하여 오버플로를 숨길 수 있습니다.

옵션 2: IFrame 수정 자체

IFrame 콘텐츠를 수정할 수 없는 경우 동일한 CSS를 IFrame 자체에 적용할 수 있습니다.

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

그러나 이 옵션을 사용하려면 다음을 사용하여 IFrame에서 스크롤 막대를 비활성화해야 합니다. scrolling="no":

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

결론

제공된 솔루션 중 하나를 따르면 가로 스크롤을 수용하면서 iOS Safari에서 IFrame의 반응성을 유지할 수 있습니다. 콘텐츠 내 영역.

위 내용은 iOS Safari에서 반응형 IFrame이 제대로 작동하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!