CSS를 사용하여 iOS에서 iframe 크기를 제어하는 ​​방법은 무엇입니까?

CSS를 사용한 iOS iframe 크기 제어

프레임 크기를 초과하는 콘텐츠가 포함된 iframe을 사용하는 경우 예기치 않은 동작이 나타날 수 있습니다. iOS에서. 다른 브라우저와 달리 iOS의 Safari는 오버플로된 콘텐츠를 수용하기 위해 프레임 크기를 조정합니다.

다음 HTML 구조를 고려하세요.

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

그리고 CSS:

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

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

켜기 iOS의 경우 iframe은 지정된 CSS 높이를 무시하고 콘텐츠에 맞게 크기가 조정됩니다. 이를 방지하려면 다음 CSS를 사용하여 래핑 div를 추가해야 합니다.

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

업데이트된 HTML 및 CSS:

<code class="html"><div class="frame_holder">
  <div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <iframe class="my_frame"></iframe>
  </div>
</div></code>

이 솔루션은 추가 제어 계층을 추가하고 지정된 CSS 크기를 준수하여 모든 브라우저에서 일관된 동작을 보장합니다.

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