CODEWITHSUNDEEP
google-apps-script
RayB
RayB

Reputation: 2336

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

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.

Upvotes: 8

Views: 9455

Answers (4)

sh3hz
sh3hz

Reputation: 1

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');
}

Upvotes: 0

Elha
Elha

Reputation: 73

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

Upvotes: 5

user8617716
user8617716

Reputation:

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.

Upvotes: 1

RayB
RayB

Reputation: 2336

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

Upvotes: 25

Related Questions