iOS Safari에서 iFrame을 반응형으로 만드는 방법은 무엇입니까?

iOS Safari의 반응형 iFrame

iOS Safari에서 iFrame을 사용하여 콘텐츠를 통합할 때 반응성을 달성하는 것이 어려울 수 있으며, 특히 iFrame의 콘텐츠에 다음이 포함된 경우 더욱 그렇습니다. 가로 스크롤 영역.

iOS 기본 동작

iFrame의 콘텐츠가 완전히 반응하고 내부 스크롤 막대를 사용하지 않고도 크기를 조정할 수 있는 경우 iOS Safari는 이에 따라 iFrame의 크기를 조정합니다.

오버플로 문제

그러나 iFrame의 콘텐츠에overflow:scroll을 추가하면 이 동작이 중단될 수 있습니다. 이런 일이 발생하면 iOS Safari는 넘쳐나는 콘텐츠가 표시되도록 iFrame의 크기를 자동으로 조정합니다.

해결책

• iFrame 콘텐츠 수정 : 넘치는 div의 너비를 설정합니다(예: #ScrolledArea). 대상:

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

  이렇게 하면 iOS Safari가 최소 너비 값을 준수하여 div의 너비가 iFrame의 너비와 일치하도록 합니다.

• iFrame 수정 : iFrame의 콘텐츠에 액세스할 수 없는 경우 동일한 CSS를 iFrame에 적용하세요. 자체:

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

  이 작업을 수행하려면 iFrame에서 scrolling="no"를 사용하여 스크롤 막대를 비활성화해야 합니다.

이러한 솔루션 중 하나를 구현하면 콘텐츠에 가로 스크롤이 포함되어 있는 경우에도 iOS Safari에서 반응형 iFrame을 구현할 수 있습니다.

위 내용은 iOS Safari에서 iFrame을 반응형으로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!