문제는 웹 사이트에 콘텐츠를 삽입하기 위해 IFrame을 사용해야 할 때 최신 웹 세계에서 IFrame도 반응 할 것입니다. 이론적으로는 간단하고 간단하게 사용 <iframe width="100%"></iframe>하거나 CSS 너비를 설정 iframe { width: 100%; }하지만 실제로는 그렇게 간단하지는 않지만 가능합니다.
iframe컨텐츠가 완전히 반응하고 내부 스크롤 막대없이 자체 크기를 조정할 수 있다면 iOS Safari는 iframe실제 문제없이 크기를 조정합니다 .
다음 코드를 고려하면 :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>
와 Content.html :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: 100%;
background: #ccc;
}
</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>
그런 다음 iOS 7.1 Safari에서 문제없이 작동합니다. 아무 문제없이 가로와 세로를 바꿀 수 있습니다.
그러나 다음을 추가하여 간단히 Content.html CSS 를 변경하면 됩니다.
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
당신은 이것을 얻는다 :
보시다시피, Content.html 컨텐츠가 완전히 반응하고 ( div # ScrolledArea 가 overflow: scroll설정 됨) iframe 너비가 100 % 인 경우에도 iframe 은 오버 플로우가 존재하지 않는 것처럼 여전히 div # ScrolledArea 의 전체 너비를 사용 합니다. 데모
이와 같은 경우 콘텐츠에 스크롤 영역이 있습니까? iframe 콘텐츠에 가로 스크롤 영역이있을 때 반응 iframe을 얻는 방법 iframe은 무엇입니까? 여기서 문제는 Content.html 이 반응하지 않는다는 사실이 아니라 iOS Safari가 단순히 iframe의 크기를 조정하여 div#ScrolledArea완전히 표시 되도록한다는 것입니다.
white-space: nowrap. 그 자체로는 문제가 아닙니다. 나는 단순히 그것을 사용하여 극단적 인 너비를 얻습니다 div#ScrolledArea. IFrame 컨텐츠에 가로로 스크롤 가능한 영역이 있으면 문제가 발생합니다. 이 경우 iOS Safari는 단순히 너비 설정을 무시하고 구멍 내용을 표시하고 사이트의 응답 성을 깨뜨립니다.
white-space: nowrap스타일 이있는 콘텐츠가있는 경우 iOS가 iFrame을 페이지의 전체 너비로 확장한다고 말하고 있습니까?