아이폰 iOS에서 CSS가있는 iframe 크기




아이폰 iframe width (4)

iOS Safari에서 iframe 콘텐츠가 예상보다 다른 원산지 (예 : 일부 픽셀만큼 이동 됨)로 표시되는 경우 iframe에 속성으로 scrolling="no" 를 추가해보십시오. 이렇게하면 자동으로 콘텐츠를 맞추지 못하게됩니다.

here.here.

기본적으로 프레임에 맞는 것보다 많은 콘텐츠가있는 iframe이 있습니다. 프레임의 크기는 브라우저 화면 크기를 기반으로하며 iOS를 제외한 모든 브라우저에서 완벽하게 작동하는 오버플로 스크롤을 허용합니다. iOS에서 사파리는 콘텐츠에 맞게 프레임의 크기를 조정하기로 결정합니다. 네가 기대하는 바가 아니야.

jsFiddle의 예제 코드 :
http://jsfiddle.net/R3PKB/2/

iOS 기기에서 사용해보세요.
http://jsfiddle.net/R3PKB/2/embedded/result

HTML :

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

CSS :

body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

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

이것은 오래된 질문이지만, Google에서 처음으로 발생하고 현재 는 iOS 기기에 문제가 있기 때문에이 페이지에서 찾은 개선점을 다시 게시합니다. iOS Safari에서 IFrame을 신속하게 처리하려면 어떻게해야합니까?

기본적으로 스크롤이있는 iframe ( 트위터 위젯이라고 가정 해 봅시다 )이있는 경우 위의 솔루션은 부모를 스크롤 가능하게 만들기 때문에 제대로 작동하지 않습니다. 나를 위해 일한 수정 height: 100% 대체하는 것입니다 height: 100% height: 1px; min-height: 100%; height: 1px; min-height: 100%; .


height: 1px; min-height: 100%; 사용 height: 1px; min-height: 100%; height: 1px; min-height: 100%; 나는 스크롤 요소가 필요 없지만 나를 위해 작동하지 않았다. 나는 overflow:auto; 를 사용해야했다 overflow:auto; 주변 div 대신. 이 방법은 의도하지 않은 결과를 초래할 수 있으므로 권장하지 않지만 Android / iOS 및 데스크톱 브라우저에서 테스트 했으므로 아직 문제를 찾을 수 없습니다. 손가락을 건넜다 .

이것은 iOS iframe 뉘앙스에 대한 Andy Shora의 멋진 게시물입니다. http://andyshora.com/iframes-responsive-web-apps-tips.html








resize