配置HTML视口的Google Apps Script移动Web应用显示异常求助

部署Google Apps Script Web应用后，顶部自动插入的Google警告横幅会挤压页面布局，导致Bootstrap 5的移动端栅格无法正常占满屏幕。以下是几种可行的修复方案：

方法1：CSS静态调整布局偏移 #

通过给页面主体添加顶部内边距抵消横幅的高度占用，同时确保Bootstrap栅格组件全屏显示：

在你的my-form.html文件的<style>标签中添加以下样式：

/* 抵消Google顶部横幅高度，避免布局被挤压 */
body {
    padding-top: 42px; /* 横幅默认高度约42px，可根据实际显示调整 */
    margin: 0;
}

/* 确保Bootstrap容器和栅格占满屏幕宽度 */
.container-fluid, .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.col-12 {
    padding-left: 0;
    padding-right: 0;
}

方法2：JavaScript动态适配横幅高度 #

如果横幅高度存在变化（比如不同环境下显示不同内容），可以用JS动态获取横幅高度并调整页面内边距：

在my-form.html的<script>标签中添加以下代码：

window.addEventListener('DOMContentLoaded', function() {
    // 定位Google顶部横幅元素（不同环境下可能有不同的选择器）
    const googleBanner = document.querySelector('#docs-banner') || document.querySelector('.script-app-banner');
    if (googleBanner) {
        const bannerHeight = googleBanner.offsetHeight;
        // 给body设置顶部内边距，匹配横幅高度
        document.body.style.paddingTop = `${bannerHeight}px`;
    }
});

方法3：统一视口设置避免冲突 #

你当前同时在doGet函数和HTML文件中设置了viewport元标签，可能导致视口解析异常。建议只保留一处设置：

• 要么删除HTML文件中的<meta name="viewport">标签，仅保留doGet中的addMetaTag配置；
• 要么删除doGet中的addMetaTag代码，仅保留HTML文件中的视口标签。

内容的提问来源于stack exchange，提问作者It's Leto