Google Apps Script开发的WebApp移动端无法适配小屏幕问题求助

问题原因 #

Google Apps Script 的 HtmlService 会将你编写的HTML内容嵌套在平台自带的iframe中渲染，你在自己的HTML文件内添加的viewport元标签仅作用于iframe内部，不会影响外层容器，所以会出现移动端适配失效的问题。

解决方案 #

你需要在doGet方法中，对返回的HtmlOutput对象手动添加viewport元标签，配置会作用于外层渲染容器，即可解决适配问题。

修正后的代码示例 #

// 模板渲染写法
function doGet() {
  return HtmlService.createTemplateFromFile("main")
    .evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}

// 直接读取HTML文件写法
function doGet() {
  return HtmlService.createHtmlOutputFromFile("main")
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}

补充说明 #

• 你可以删除HTML文件中自行添加的viewport标签，避免重复配置，保留也不会产生冲突。
• 其他需要作用于外层容器的元标签，也可以通过addMetaTag方法统一添加。

内容的提问来源于stack exchange，提问作者Jean Jean