ios - Angular2 - Google 表单在 iOS 上没有响应

Question

我正在使用 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 很丑)。无论如何，感谢您的宝贵时间!

Answer 1

问题:谷歌知道谷歌表单在 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 链接:

how to properly display an iFrame in mobile safari

How to get an IFrame to be responsive in iOS Safari?