我正在使用 Angular 2 创建网站，我使用 iFrame 成功地将 Google 表单包含在其中。它在我在笔记本电脑 (linux) 和手机 (android) 上测试的每个浏览器(Firefox、Opera、Chrome)上都运行良好。
但是，它不适用于 iOS。 iframe 已显示并且可以滚动 ( screenshot ) 但它对于屏幕来说太大了，它根本没有响应。这是我的 tablet 上的样子(安卓)。
我尝试通过查看十几个 stackoverflow 答案来修复它，但到目前为止，我只能通过添加最后一行 CSS 来使 iframe 可滚动。我像这样坚持使用 iframe 已经一个月了，我变得有点绝望了!
手动将 iframe 的宽度设置为绝对值对 iOS 没有影响(但它确实在我的手机上有一个)。
这是包含 iframe 的 div 的 CSS:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
这是 iframe 本身的 CSS:
max-width: 100%;
min-width: 100%;
height: 100%;
这是包含 iframe 的 HTML 部分:
<div class="frame-flex">
<iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
我必须补充一点，我是 HTML/CSS 的初学者(如果您想知道为什么 CSS 很丑)。无论如何，感谢您的宝贵时间!
最佳答案
问题: 谷歌知道谷歌表单在 IOS 上没有响应:https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0
本质上，嵌入式 google 表单在桌面上运行良好，但在移动设备上没有滚动选项。在我对 ipad 的 IOS 9 测试中，Safari 也会崩溃。我进行的 Bootstrap4 和 Angular 测试发现嵌入式 iframe google 表单也没有响应并且没有滚动条。
解决方法: 如果您的网页不使用上述框架之一(这也允许顶部导航栏)，您仍然可以在 IOS 上使用以下内容:
<style>
#all{
width:100%;
height: 100%;
float:none;
text-align:center;
}
</style>
<div id="all">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
</div>
最后(尽管与 google 表单没有直接关系):检查这些 stackoverflow 链接:
关于ios - Angular2 - Google 表单在 iOS 上没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48036895/