问题在于，当您必须使用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>然后这在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完全可见。
3 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
我需要一个跨浏览器的解决方案。要求是：
需要在iOS和其他地方工作
无法访问iFrame中的内容
需要它滚动！
建立我从@Idra学到的有关iOS上滚动=“否”的内容以及关于在iOS中将iFrame内容拟合到屏幕的帖子，这就是我最终的结果。希望它可以帮助某人=）
HTML
<div id="url-wrapper"></div>
CSS
html, body{
height: 100%;
}
#url-wrapper{
margin-top: 51px;
height: 100%;
}
#url-wrapper iframe{
height: 100%;
width: 100%;
}
#url-wrapper.ios{
overflow-y: auto;
-webkit-overflow-scrolling:touch !important;
height: 100%;
}
#url-wrapper.ios iframe{
height: 100%;
min-width: 100%;
width: 100px;
*width: 100%;
}
JS
function create_iframe(url){
var wrapper = jQuery('#url-wrapper');
if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
wrapper.addClass('ios');
var scrolling = 'no';
}else{
var scrolling = 'yes';
}
jQuery('<iframe>', {
src: url,
id: 'url',
frameborder: 0,
scrolling: scrolling
}).appendTo(wrapper);
}
- 3 回答
- 0 关注
- 730 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消