如何在 HTML 中设置 Google 表单的边距答案

【问题标题】：How to space Google Form margins in HTML如何在 HTML 中设置 Google 表单的边距
【发布时间】：2020-05-08 22:35:28
【问题描述】：

我正在尝试将 Google 表单添加到我的移动网站。我希望它填满屏幕的整个宽度。这是我的html：

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc5jGXQ0hGA14kFnw4OGRE9aExMNtKNwHKWn-2CSUwti3CfbA/viewform?embedded=true" width="100%" height="95%" id="mobileContactForm" frameborder="0" marginheight="0" marginwidth="0" >Loading…</iframe>

关联的CSS如下：

#mobileContactForm{
  padding: 0;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

当我在桌面上的谷歌浏览器上加载这个网页时，窗口大小与智能手机的纵横比一致，它看起来很好，正确地占据了网页的整个宽度： Google Form on my desktop.

但是，当我在手机（三星 Galaxy s8）上加载 chrome 中的相同页面时，表单两侧都有巨大的空白区域，由于某种原因，它看起来非常小： Google Form on my website

iframe 标记上的 width 属性设置为 100%，所以我不确定为什么它在我的手机和我的桌面上会如此不同。有谁知道是否有办法使表格在移动设备上正确调整大小，或者为什么会发生这种情况？

谢谢

【问题讨论】：

你有正确的meta viewport标签吗？
@Phix 啊，我不知道那是一件事……显然我在 HTML 方面没有太多经验。我阅读了文档并立即修复了它。谢谢！

标签： javascript html css google-forms

【解决方案1】：

您是否尝试过带有viewport 属性的<meta> 标记？这应该会有所帮助。

【讨论】：