如何在HTML中分隔Google Form的页边空白

Question

我正在尝试将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 Chrome上时，该窗口的大小与智能手机的长宽比一致，因此看起来不错，可以正确占据整个页面的宽度：Google Form on my desktop.

但是，当我在手机（Samsung Galaxy s8）上的Chrome中加载同一页面时，表格两边都有巨大的空白，由于某些原因，该空白看起来很小：Google Form on my website

iframe标签上的width属性设置为100％，所以我不确定为什么手机和台式机的宽度属性会如此不同。有谁知道是否有一种方法可以使表格在移动设备上正确调整大小，或者为什么会发生这种情况？

谢谢

Answer 1

您是否尝试过使用<meta>属性的viewport标签？那应该有帮助。