问题在于,当您必须使用IFrame将内容插入网站时,那么在现代网络世界中,预计IFrame也会响应.从理论上讲它很简单,只需要使用或设置CSS宽度,iframe { width: 100%; }但在实践中它并不是那么简单,但它可以.

如果iframe内容完全响应并且可以在没有内部滚动条的情况下自行调整大小,那么iOS Safari将调整大小而iframe没有任何实际问题.

如果您考虑以下代码:

    
    

        #Main {
            padding: 10px;
        }
    


    
Iframe Isolation Test 13.17
    

        
    

使用Content.html:

    
    

        #Main {
            width: 100%;
            background: #ccc;
        }

    


    

        

            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. 
        
      
    

然后这在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完全可见.

这个问题的解决方案实际上非常简单,有两种方法可以实现.如果您可以控制Content.html,则只需将div#ScrolledAreaCSS宽度更改为:

        width: 1px;
        min-width: 100%;
        *width: 100%;

基本上这里的想法很简单,你设置的width东西比视口小(在这种情况下是iframe宽度),然后覆盖它min-width: 100%以允许实际width: 100%默认覆盖哪个iOS Safari.这*width: 100%;是代码将保持IE6兼容,但如果你不关心IE6你可以省略它.演示

正如您现在所看到的,div#ScrolledArea宽度实际上是100%并且overflow: scroll;可以做到这一点并隐藏溢出的内容.如果您有权访问iframe内容,那么这是首选.

但是,如果您无法访问iframe内容(出于任何原因),那么您实际上可以在iframe上使用相同的技术.只需在iframe上使用相同的CSS:

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

但是,这有一个限制,您需要关闭scrolling="no"iframe上的滚动条才能使其工作:

如果允许滚动条,那么这将不再适用于iframe.也就是说,如果您修改Content.html,则可以保留iframe中的滚动.演示

这个问题,似乎是移动Safari浏览器将拒绝服从你的iFrame的宽度如果它包含该文件是比你指定的内容更广泛.例:

http://jsbin.com/hapituto/1

在桌面浏览器上,您会看到iFrame和Div都设置为300px.内容更宽,因此您可以滚动iFrame.

但是,在移动版Safari中,您会注意到iFrame会自动扩展到内容的宽度.

我的猜测是,这是在页面内滚动内容的长期问题的解决方法.过去,如果你在触摸设备上有一个大的滚动iframe,你会在iframe中"卡住",因为它会滚动而不是页面本身.Apple似乎已经决定iFrame的默认行为是"无滚动"并进行扩展以防止它出现.

一种选择可能是此解决方法.而不是假设iFrame将滚动,将iframe放在您可以控制的DIV中并让它滚动.

例如:http://jsbin.com/zakedaja/1

示例标记:

在移动版Safari中,您现在可以通过包含它的div滚动现在完全展开的iFrame的内容.

问题:这在桌面浏览器上看起来很难看,因为现在你有双滚动条.所以你可能不得不用JS做一些浏览器检测来解决这个问题.

我需要一个跨浏览器的解决方案.要求是:

需要在iOS和其他地方工作

无法访问iFrame中的内容

需要它滚动!

建立我从@Idra学到的有关iOS上滚动="否"的内容以及关于在iOS中将iFrame内容拟合到屏幕的帖子,这就是我最终的结果.希望它可以帮助某人=)

HTML

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('