Google Apps Script Web应用移动端不响应问题求助

问题分析 #

你的代码本身符合响应式规范，本地模拟和Glitch部署场景下均正常，但通过script.google.com链接访问时失效，核心原因是Google Apps Script的Web应用部署环境会默认添加页面包装层，干扰viewport标签的解析与视口计算，导致移动端无法正确适配屏幕宽度。

解决方案 #

1. 修正GAS后端代码，强制锁定视口规则 #

在Code.gs文件中，通过setMetaTag方法明确指定视口参数，确保移动端视口被正确识别：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1');
}

2. 调整部署权限设置 #

部署Web应用时，确认以下配置：

• 执行方式：选择“我（你的Google账号）”（根据业务需求调整）
• 谁可以访问此应用：选择“任何人，甚至匿名”（公开访问场景）或“组织内任何人”（内部访问场景）
• 若部署界面有“显示Google默认页眉”选项，取消勾选（避免容器样式干扰）

3. 保留HTML内的viewport标签 #

确保index.html中的viewport标签保留，与后端设置形成双重保障：

<meta name="viewport" content="width=device-width, initial-scale=1">

原理说明 #

Google Apps Script部署的Web应用会将你的页面嵌入到官方容器页面中，若不明确指定视口规则，容器的默认样式会覆盖自定义的视口设置，导致移动端无法响应屏幕宽度变化。通过后端显式设置setMetaTag，可强制浏览器使用正确的视口规则，IFRAME沙箱模式则能减少容器对页面样式的干扰。

内容的提问来源于stack exchange，提问作者cedric le valegant