How can I make Google Apps Scripts web apps responsive and mobile friendly?

Question

I've been trying for a few days to figure out how I can make the web app from my Google App Script work on mobile. The most common solution I've seen is to simply embed the web app into the old version of Google Sites.

Right now the page resizes fine on desktop browsers but as soon as I open it up on mobile it's all zoomed out way too far.

Gebler

Answer 1

The way to do this is use the addMetaTag method in your to your .gs file.

 var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
 output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

To read more about it look at the documentation here:

https://developers.google.com/apps-script/reference/html/html-output#addmetatagname-content

Gebler

Answer 2

In case you are using HtmlService.createTemplateFromFile(filename) and you use .evaluate(), then you have to do like this:

 var html = HtmlService.createTemplateFromFile(filename);
    var evaluated = html.evaluate();
    evaluated.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return evaluated

Ravo

Answer 3

In your Google Site:

• Scroll down «More actions» gearwheel
• Click on «Manage site»
• Go down to «Mobile»
• Check «Automatically adjust site to mobile phones»

The answer provided by RayB is in case you want to open the published Google Apps Script web app directly in your mobile device and without embedding it in a Blog or a Google Site.

Fer

Answer 4

For the default web app template, you can add addMetaTag for evaluate() in doGet().

function doGet(e){
  var template = HtmlService.createTemplateFromFile('Index');
  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
    .setTitle('Web App Window Title')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

Landowner