iOS Safari에서 IFrame 응답성 문제를 어떻게 해결할 수 있습니까?

iOS Safari에서 IFrame 응답성 문제 해결

IFrame을 사용하여 외부 콘텐츠를 웹사이트에 통합하면 최신 기기에서 응답성을 유지하는 데 어려움을 겪는 경우가 많습니다. . 이 문제는 IFrame이 크기를 완전히 조정하지 못할 수 있는 iOS Safari에서 특히 두드러집니다.

이 문제를 극복하려면 먼저 근본적인 원인을 이해해야 합니다. IFrame 콘텐츠에 내부 스크롤 막대가 있는 경우 iOS Safari 브라우저는 스크롤 막대의 전체 콘텐츠를 수용할 수 있도록 IFrame의 크기를 자동으로 조정합니다. 이 동작은 원하는 응답성과 모순됩니다.

솔루션

이 문제를 해결하는 데는 두 가지 효과적인 접근 방식이 있습니다.

1. IFrame 콘텐츠 수정

삽입된 IFrame(예: Content.html)의 콘텐츠를 제어할 수 있는 경우 스크롤 영역의 CSS(div#ScrolledArea)를 수정할 수 있습니다.

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

이 CSS는 최소 너비를 설정하여 IFrame이 뷰포트 너비를 초과하지 않도록 합니다. min-width 및 *width 값은 iOS Safari의 기본 동작을 재정의합니다.

2. IFrame 요소 수정

IFrame 콘텐츠에 액세스할 수 없는 경우 IFrame 요소 자체를 조작할 수 있습니다.

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

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

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

스크롤 막대를 비활성화해야 하지만 IFrame 콘텐츠는 IFrame 내에 스크롤 막대를 유지하는 데 여전히 선호되는 솔루션입니다.

두 솔루션 모두 IFrame의 너비가 반응하고 스크롤 영역이 의도한 대로 작동하도록 보장합니다.

위 내용은 iOS Safari에서 IFrame 응답성 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!