CSS를 사용하여 iOS 기기에서 Iframe 크기 문제를 해결하는 방법은 무엇입니까?

CSS를 사용하여 iOS에서 iframe 크기 문제 수정

iOS 기기에서 iframe을 표시할 때, 특히 iframe 콘텐츠가 크기를 초과하는 경우 일관되지 않은 동작이 발생할 수 있습니다. 할당된 프레임 공간. 다른 브라우저에서는 오버플로 스크롤을 허용하는 반면, iOS의 Safari는 초과 콘텐츠를 수용하기 위해 예기치 않게 프레임 크기를 조정합니다. 원하는 동작과의 편차는 CSS 수정을 통해 해결할 수 있습니다.

해결책:

이 문제를 해결하고 여러 기기에서 일관된 iframe 동작을 보장하려면 다음 CSS 코드를 사용할 수 있습니다. 추가됨:

<code class="css">.frame_holder {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}</code>

수정된 HTML 및 CSS는 다음과 같습니다.

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

<code class="css">body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

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

설명:

추가된 CSS 스타일은 두 가지를 소개합니다. 중요한 속성:

• overflow: auto; 필요에 따라 스크롤 막대를 추가하여 상위 컨테이너가 넘쳐나는 콘텐츠를 수용할 수 있도록 합니다.
• -webkit-overflow-scrolling: touch; iOS 장치에 대한 공급업체별 속성입니다. 상위 컨테이너에 터치 스크롤 메커니즘이 사용되도록 보장하여 iOS에서 원활한 스크롤을 허용합니다.

이러한 CSS 수정 사항을 통합함으로써 iframe은 지정된 크기를 유지하면서 우아한 오버플로 스크롤을 허용합니다. iOS 기기.

위 내용은 CSS를 사용하여 iOS 기기에서 Iframe 크기 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!