Google 表单未在移动设备上显示完整表单

Question

问题：我的Google表单在手机上被切断。最终用户很难理解 iframe 是可滚动的。

我尝试过的：我一直在网上寻找想法。我尝试了 height: 1000px 和 height: 100% 都没有成功。

这篇文章的目标：我希望有人可以向我展示如何在不影响网站响应能力的情况下显示完整长度的 Google 表单。

我添加了我在手机上看到的屏幕截图。

enter image description here

#headerText {
    text-align: center;
    font-size: 2.2rem;
    padding-top: .7%;
}

.img-fluid {

    max-width: 100%;
    height: auto;
    padding: 15px 0 15px 0;
}

.bg {
    background: url(https://subtlepatterns.com/patterns/kindajean.png);
    width: auto;
}

.boxWhite {
    background-color: white;
    font-size: 20px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.text-primary {

    background-color: white;
    width: 400px;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;

}

#googleForm {
    height: 1000px;
}

.button {
    padding: 30px 0 80px 0;
    font-family: 'Montserrat', sans-serif;

}

.seanText {
    background: white;
    color: #007BFF;
    font-size: 20px;
    text-align: center;
    word-spacing: 1.2px;
    padding: 20px 10% 20px 10%;
    font-family: 'Montserrat', sans-serif;
}

.iframe {
    margin-left: 3%;
    margin-top: 6%;
}

#header {
    font-family: 'Montserrat', sans-serif;
    height: 90px;
    background-color: #007BFF;
    height: 120px;
    padding-top: 2%;

}

.iframeSean {

    height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Sean Is Getting Married</title>

</head>

<body>
    <div id="header">
        <div id="headerText">
            <a href="http://seanisgettingmarried.com" class="text-center bg-primary text-white headerText">Sean Brown's
                Bachelor Party</a>
        </div>
    </div>

    <div class="d-flex justify-content-center">

        <div class="embed-responsive embed-responsive-1by1 iframe">
            <iframe class="embed-responsive-item iframeSean"
                src="https://docs.google.com/forms/d/e/1FAIpQLScQ2hk1LN-1ZY1s9hmltqaIx5p8NSHJyE1-1mz-HSJ-sDMDGg/viewform?embedded=true"
                width="640" height="1103" frameborder="0" marginheight="0" marginwidth="0"> Loading…</iframe>
        </div>
    </div>
</body>

</html>

Answer 1

增加高度：

<iframe class="embed-responsive-item iframeSean"
                src="https://docs.google.com/forms/d/e/1FAIpQLScQ2hk1LN-1ZY1s9hmltqaIx5p8NSHJyE1-1mz-HSJ-sDMDGg/viewform?embedded=true"
                width="640" **height="2500"** frameborder="0" marginheight="0" marginwidth="0"> Loading…</iframe>

谢谢

Answer 2

请将宽度更改为100%，高度更改为500px

加载中…

Answer 3

首先，去掉html代码中的宽度和高度默认值。为 iframe 分配一个类，例如：class="responsive-iframe"。接下来，添加以下 CSS：

.responsive-iframe { width: 100vw;  height: 100vh; }

由于 100% 对我来说不起作用，所以这种方法在桌面和移动设备上都很有效。干杯。

Google 表单未在移动设备上显示完整表单

问题描述投票：0回答：3

3个回答

最新问题

Google 表单未在移动设备上显示完整表单

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3