iOS Safari에서 반응형 IFrame이 작동하지 않는 이유는 무엇입니까?

iOS Safari에서 IFrame을 반응형으로 만드는 방법

IFrame을 사용하여 웹사이트에 콘텐츠를 통합할 때 IFrame이 콘텐츠를 유지하는 것이 중요합니다. 그 반응성. HTML 또는 CSS를 사용하여 IFrame의 너비를 100%로 설정하는 것이 간단해 보일 수 있지만 iOS Safari에는 고유한 과제가 있습니다.

외부 스크롤 기능이 있는 반응형 IFrame

IFrame의 너비가 콘텐츠는 완벽하게 반응하며 내부 스크롤 막대가 필요하지 않습니다. iOS Safari는 자동으로 IFrame의 크기를 조정합니다. 문제.

내부 스크롤 기능이 있는 반응형 IFrame

그러나 IFrame 콘텐츠에 가로 스크롤 영역이 포함되어 있으면 문제가 발생합니다. iOS Safari는 오버플로 설정을 무시하고 이러한 스크롤 영역이 완전히 표시되도록 IFrame의 크기를 조정합니다.

해결책

이 문제를 해결하려면 다음 두 가지 해결 방법이 있습니다.

IFrame 수정 콘텐츠:

1. IFrame 콘텐츠 내 스크롤 div의 너비(예: div#ScrolledArea)를 다음과 같이 설정합니다.

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

   로그인 후 복사
2. 이것은 div의 너비가 IFrame의 너비보다 작지만 여전히 사용 가능한 너비의 100%를 차지하도록 허용합니다. space.

IFrame 요소 수정:

1. IFrame 콘텐츠에 액세스할 수 없는 경우 다음을 적용할 수 있습니다. IFrame과 동일한 CSS 자체:

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

   로그인 후 복사
2. 또한 scrolling="no" 속성을 사용하여 IFrame의 스크롤 막대를 비활성화합니다.

위 내용은 iOS Safari에서 반응형 IFrame이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!