iOS Safari에서 Iframe 크기 조정 문제를 해결하는 방법: 일관된 표시를 위한 해결 방법?

iOS의 Iframe 크기: Safari의 크기 조정 이상 문제 수정

특정 시나리오에서는 과도한 콘텐츠가 포함된 iframe이 iOS 기기에서 잘못 표시될 수 있습니다. 콘텐츠 오버플로 및 스크롤을 허용하는 다른 브라우저와 달리 iOS의 Safari는 콘텐츠에 맞게 iframe 크기를 자동으로 조정합니다.

이 동작은 CSS를 통해 iframe 크기를 제어하려는 의도를 무시합니다. 이 문제를 해결하고 플랫폼 전체에서 일관된 iframe 크기를 보장하려면 해결 방법을 구현해야 합니다.

해결책: Overflow Containment

특정 CSS가 포함된 추가 div 요소를 추가합니다. 속성을 사용하면 iframe이 의도한 크기를 유지하고 오버플로 스크롤을 활성화하도록 할 수 있습니다. 수정된 HTML 코드는 다음과 같습니다.

<code class="html"><div class="frame_holder">
  <div class="wrapper">
    <iframe class="my_frame">
      // The content
    </iframe>
  </div>
</div></code>

그리고 해당 CSS는 다음과 같습니다.

<code class="css">.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}</code>

.wrapper div는 래핑 div 내에서 세로 스크롤을 가능하게 하는 Overflow: auto;를 도입합니다. webkit-overflow-scrolling: touch;는 iOS 기기의 스크롤 성능을 최적화하는 웹킷 관련 속성입니다.

이 해결 방법을 사용하면 iframe의 크기가 유지되어 iOS와 iOS 모두에서 일관되고 적절한 사용자 환경을 제공합니다. iOS가 아닌 기기.

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