Vấn đề là khi bạn phải sử dụng IFrames để chèn nội dung vào một trang web, thì trong thế giới web hiện đại, người ta hy vọng rằng IFrame cũng sẽ phản hồi tốt. Về lý thuyết, nó đơn giản, chỉ đơn giản là người dùng sử dụng <iframe width="100%"></iframe>hoặc đặt độ rộng CSS thành iframe { width: 100%; }tuy nhiên trong thực tế, nó không hoàn toàn đơn giản, nhưng nó có thể.
Nếu iframenội dung phản hồi đầy đủ và có thể tự thay đổi kích thước mà không cần thanh cuộn bên trong, thì iOS Safari sẽ thay đổi kích thước iframemà không có bất kỳ vấn đề thực sự nào.
Nếu bạn xem xét các mã sau đây:
<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>Với 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>Sau đó, điều này hoạt động mà không có vấn đề trong iOS 7.1 Safari. Bạn có thể thay đổi giữa phong cảnh và chân dung mà không có bất kỳ vấn đề.
Tuy nhiên, chỉ cần thay đổi Content.html CSS bằng cách thêm:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Bạn nhận được điều này:
Như bạn có thể thấy, mặc dù nội dung Content.html hoàn toàn đáp ứng ( div # ScrolledArea đã overflow: scrollđặt) và chiều rộng iframe là 100% iframe vẫn lấy toàn bộ chiều rộng của div # ScrolledArea như thể tràn không tồn tại. Bản giới thiệu
Trong những trường hợp như thế này, iframenội dung có các vùng cuộn trên đó không, câu hỏi trở thành, làm thế nào để có iframephản hồi, khi nội dung iframe có các vùng cuộn theo chiều ngang? Vấn đề ở đây không nằm ở chỗ Content.html không phản hồi, mà thực tế là Safari Safari chỉ đơn giản thay đổi kích thước iframe để div#ScrolledAreacó thể hiển thị đầy đủ.
white-space: nowrapbản thân nó không phải là vấn đề. Tôi chỉ đơn giản là sử dụng nó để có được một chiều rộng cực đoan div#ScrolledArea. Vấn đề xảy ra khi nội dung IFrame có các vùng có thể cuộn theo chiều ngang trong đó. Nếu đó là trường hợp, Safari Safari chỉ cần bỏ qua các cài đặt chiều rộng của bạn và hiển thị nội dung lỗ hổng và phá vỡ khả năng phản hồi của trang web.
white-space: nowrapkiểu dáng không?