相关疑难解决方法(0)
iOS 11 WebKit iframe错误的解决方法
iOS WebKit iframe错误描述
iOS WebKit将iframe的大小调整为其内容的完整大小(见下图).这是一个自2016年以来已知的错误,但仍未在iOS 11中解决:https://bugs.webkit.org/show_bug.cgi？id = 155198
我目前的发现
1.对于固定的iframe内容(例如视频)
它足以在下面应用CSS,但它可以防止iframe内容滚动.
.fixed iframe {
width: 0;
height: 0;
min-width: 100%;
min-height: 100%;
}
2.对于可滚动的iframe内容(例如页面)
- 我们需要两个iframe容器:一个作为边界(固定大小),第二个作为滚动区域.
- 要适合iframe内容,其div容器必须以像素为单位定义w/h.任何相对度量(如%,vw/vh)都不起作用.
一些RWD页面(假设"不完整的RWD")正在经历iframe溢出(iframe不适合iframe容器).不幸的是,我们无法从iframe中解决这个问题并解决此问题,iframe中的文档至少需要:
Run Code Online (Sandbox Code Playgroud)body { max-width: 100vw !important; }或者,我们可以将iframe内容缩放为最后的手段.
因为2,为了保持容器比例,我们至少需要使用CSS媒体查询或JS来调整其高度.
一些不完整的解决方案:
- https://github.com/ampproject/amphtml/issues/11133
- https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/
- Bootstrap Popover内容中的外部HTML文件
- 如何让IFrame在iOS Safari中响应？
- iFrame高度自动(CSS)
- iframe会根据内容自动调整高度而不使用滚动条？
- iframe滚动iOS 8
- iOS8 Safari -webkit-overflow-scrolling:touch; 问题
我的解决方法发布在答案中.
推荐指数
解决办法
查看次数
你能让 iFrame 响应吗？
我想在另一个网站的 WordPress 页面中嵌入一个网站。
iframed 网站是asp 中的联系表单处理页面，它没有响应。
我可以将它包装在一个响应式的 div 标签中，或者我可以让 iFrame 响应吗？
谢谢。
推荐指数
解决办法
查看次数
如何在iPhone 6中使iFrame响应？
我添加了一个iframe,它在所有浏览器和一些设备上工作正常但在iphone 6中.iframe没有响应.它不适合100%的iPhone屏幕尺寸.
我在网上找到了很多解决方案,但大多数都展示了如何在iphone中制作iFrame滚动.我不需要那个.我想让它响应并根据屏幕大小进行调整.
<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>
我在上面的示例中删除了iframe中的src =""
从屏幕截图中可以看出iframe没有响应并且出现水平滚动.在加载过程中,iframe是根据设备视口进行的,但是一旦完全加载,iframe将获取整个宽度并显示水平滚动.
检查浏览器堆栈
推荐指数
解决办法
查看次数
IFrame 在 IOS Safari 上不滚动
当我使用 IOS Safari 时，网页上有一个 IFrame，但有一个错误，它不允许我向下滚动。我对此做了很多研究，发现这是一个常见的错误，但我似乎无法让我的版本正常工作。最具描述性的解决方案是 如何让 IFrame 在 iOS Safari 中响应？。
尽管我无法让该方法为我工作。这是我到目前为止所拥有的：
索引.html
html,
body {
padding: 0;
margin: 0;
border: 0;
}
iframe {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
border: 0;
z-index: 9999;
/* overflow: auto; */
}
#scroll-wrapper {
-webkit-overflow-scrolling: touch!important;
overflow-y: scroll;
width: 100%;
height: 150vh;
z-index: 9999;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<!-- <div id="scroll-wrapper"> -->
<iframe src="iframe.html" allowtransparency="true"></iframe>
<!-- </div> -->
</body>
</html>iframe.html …
推荐指数
解决办法
查看次数