iPhone 세로보기에서 iframe 너비 100 %를 얻는 방법

Question

기본적으로 나는 here과 동일한 문제가 있습니다. 그러나 그는 좋은 대답을 얻지 못했기 때문에 질문을 다시 게시합니다.

그래서 iPhone Safari에서만 세로보기의 width="100%"이 잘못되어 IFrame의 가로 폭이 줄었습니다. 그리고 나는 여기서 무슨 일이 일어나는지 알아낼 수 없습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" /> 

을 그리고 iframe 내에 사이트는 실제로이 320보다 훨씬 좁은 가서도 정의 같은 뷰포트를 가지고 있습니다 :

나는 올바른 뷰포트를 사용하고 있습니다. (나는 이것이 비슷한 요소 일 수있는 유사한 질문 중 하나를 읽었으므로 나는 단지 설명하고있다).

URL을 추가하기 전에 디버거에서 iFrame의 offsetWidth가 304px이고로드 후 가로보기에 맞는 588px임을 알 수 있습니다. 그러나 그것이 왜 변했는지 나는 모른다. IFrame 내의 페이지는 다른 도메인에서 가져온 것이므로 기본 페이지에서 iframe의 너비에 아무런 영향을주지 않습니다.

iPhone에서 사용하는 iPhone은 iOS 7.0.2

PS입니다. 제발 JS 응답을 게시하지 마십시오 수동으로 창 크기를 조정 iframe의 크기, 나는 현재 비 JS 수정 찾고, 그리고 이것은 내가 사용하려는 마지막 옵션입니다. 또한 @media CSS 응답을 게시하지 마십시오. min-width을 iPhone 세로보기 너비로 320px로 설정하면 여러 가지 이유로 저에게 적합하지 않습니다.

Answer 1

OK 디버깅 시간이 드디어 해결책을 발견 한 후, 그래서 난 후,하지만 순수 CSS 솔루션 unfortunatelyit되지 않습니다 :

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

를 설정하면 :

에서 적용해야 CSS이됩니다 폭을 세로 폭보다 낮게 설정하고 최소 너비를 100 %로 설정하면 width: 100%이되지만 실제로는 작동하는 버전이되어 iframe은 가로 너비가 아닌 실제 컨테이너 너비를 사용합니다. *width: 100%;이 있으므로 IE6에서는 너비가 여전히 100 %가됩니다.

그러나 iframe 속성 scrolling="no"에서만 작동하며 스크롤이 허용되면 더 이상 작동하지 않습니다. 따라서 일부 경우에 유용성이 제한 될 수 있습니다.

Answer 2

은 여기에 대한 답변 : iframe size with CSS on iOS

는 간단히과 사업부에 iframe을 포장 :

overflow: auto; 
-webkit-overflow-scrolling:touch; 

http://jsfiddle.net/R3PKB/7/