Issues with autozoom in webapp

Brett Grear

unread,

Feb 7, 2022, 9:33:38 AM2/7/22

to Google Apps Script Community

Dear all,

I'm having all sorts of trouble with autozoom on text inputs.

It only seems to be happening on my Pixel 6 Pro. My old Pixel 4XL works fine.

I have included a meta tag:

And made sure that the font-size is at least 16px (24px to be exact). Everything I've read says that this should stop autozoom.

I'm sure I'm missing something but I've spend the best part of a day on this and am getting no where. I made a simplified example of the problem.

function doGet(e) {
  var html =  HtmlService.createTemplateFromFile('index').evaluate();
  html.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return html;
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      input[type="text"] {
        font-size:24px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type='text'></input>
    </form>
  </body>
</html>


I have also tried using w3css but have the same problems.  It must be something to do with apps script or something I'm doing wrong because when I look at other websites for example, https://www.w3schools.com/w3css/w3css_input.asp, the form inputs work as expected and don't zoom in.

Any help would be much appreciated.

Brett Grear

unread,

Feb 7, 2022, 9:38:05 AM2/7/22

to Google Apps Script Community

Here is a video that shows what happens on the Pixel 6 Pro.

https://drive.google.com/file/d/1KfobApcaqFjb3pOdWFYO3KjOELgg3yX5/view?usp=sharing

Brett Grear

unread,

Feb 7, 2022, 9:58:29 AM2/7/22

to Google Apps Script Community

If anyone has a Pixel 6 Pro and could verify if it happens for them, here is the script exec - https://script.google.com/macros/s/AKfycbz2wjmORerdNjVvyb706U5AM45Tw800wlK1PBrLbt6cGTZjDc29tVOS2b7H4_OJHlr3/exec

I'm not sure if it is Pixel 6 Pro specific, or any large phones. It's driving me mad because it seems so much more complicated than necessary.

Clark Lind

unread,

Feb 7, 2022, 11:24:49 AM2/7/22

to Google Apps Script Community

Try moving the "evaluate" to the return statement. By including it on the declaration line, the metadata tag never gets added.

function doGet(e) {

  var html =  HtmlService.createTemplateFromFile('index'); //not here

  html.addMetaTag('viewport', 'width=device-width, initial-scale=1');

  return html.evaluate(); //here

}

Or simply add the metadata tag to the html file.

<!DOCTYPE html>

<html>

  <head>

    <base target="_top">

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

    <style>

      input[type="text"] {

        font-size:24px;

}

    </style>

  </head>

Brett Grear

unread,

Feb 7, 2022, 11:51:59 AM2/7/22

to Google Apps Script Community

If I move evaluate to after addMeta tag it gives me an error: TypeError: html.addMetaTag is not a function (line 3, file "Code")

The first thing I tried was putting the meta tag straight into the html but the exact same issue was happening.

https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String) says that Meta tags included directly in an Apps Script HTML file are ignored.

Brett Grear

unread,

Feb 7, 2022, 3:27:52 PM2/7/22

to Google Apps Script Community

I have discovered that it happens if I set a width to the input box. Although I don't know why.

If I leave a width off of input then the input box goes way outside the surrounding form which is set to width=100% but it doesn't zoom when clicked on.

I really don't get what's causing this.

I've also discovered that it only affects the phone in portrait mode. If I change to landscape then it works fine.

João Batista da Silva

unread,

Feb 7, 2022, 3:51:05 PM2/7/22

to google-apps-sc...@googlegroups.com

hello, this problem on smartphones is usually caused by the font size configured for the input, you should use a font larger than 16px to avoid autozoom.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/6bc23b03-0642-41f9-a8a7-f5aac4af1626n%40googlegroups.com.

João Batista da Silva

unread,

Feb 7, 2022, 3:51:17 PM2/7/22

to google-apps-sc...@googlegroups.com

Another thing that MAY help, is to use a STYLE tag in a separate file. It's one of the best practices recommended by the Apps Script documentation... To use CSS and Javascript in separate files from the main HTML.

Brett Grear

unread,

Feb 7, 2022, 3:56:00 PM2/7/22

to Google Apps Script Community

Thanks for your suggestions.

The demo I shared is just small scale to show the issue. My actual project does have the styles in a separate file as per the guidelines.

As you might also see from the initial post, the font-size is set to 24px which is larger than 16px and yet the zooming is still a feature.

I wish I knew someone with a Pixel 6 Pro that could see if this behaviour is replicable for them or if it specific to my phone. I don't want to do a factory reset to test that theory if it is not just an issue on my phone.

João Batista da Silva

unread,

Feb 7, 2022, 4:00:35 PM2/7/22

to google-apps-sc...@googlegroups.com

Sorry, I didn't really pay attention to the code in the first post... It's really weird that this is happening since it has all the correct parameters...

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/4b9142e6-b4bc-4373-b8e0-2d941fabcc2en%40googlegroups.com.

Brett Grear

unread,

Feb 7, 2022, 4:07:18 PM2/7/22

to Google Apps Script Community

Yeh it is very strange.

It seems to be happening on all apps script web apps on that phone in portrait mode.

It also happens in all browsers on that phone.

Other website form inputs work fine.

Brett Grear

unread,

Feb 7, 2022, 5:41:56 PM2/7/22

to Google Apps Script Community

I tried using the developer tools to inspect what is happening on the phone but all they show is an iframe. They don't actually show the webapp's html and styles.

João Batista da Silva

unread,

Feb 7, 2022, 6:32:29 PM2/7/22

to google-apps-sc...@googlegroups.com

Try not to close the input tag with </input>....

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/57553312-9ba3-455e-8cc1-7aeeaf04874dn%40googlegroups.com.

Brett Grear

unread,

Feb 7, 2022, 6:46:40 PM2/7/22

to Google Apps Script Community

Good idea! I just tried it and it didn't make any difference though.

João Batista da Silva

unread,

Feb 7, 2022, 6:50:12 PM2/7/22

to google-apps-sc...@googlegroups.com

I believe something has changed in the apps script. I tested inputs from a webApp that I finished last week, it was working perfectly and to my surprise I got the same problem with autozoom... Anyone who has the opportunity to do the same test let us know...

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/57553312-9ba3-455e-8cc1-7aeeaf04874dn%40googlegroups.com.

Brett Grear

unread,

Feb 8, 2022, 4:23:34 AM2/8/22

to Google Apps Script Community

Yes, that would make sense as I have web apps I've made previously that were working and now aren't. It's frustrating that I can't work out a cause or solution.

It's also strange that it doesn't seem to affect every device (or orientation). It must have something to do with the resolution of the device.

Clark Lind

unread,

Feb 8, 2022, 8:43:56 AM2/8/22

to Google Apps Script Community

See if this helps (directly in the html header), or change to run in the doGet function:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Clark Lind

unread,

Feb 8, 2022, 8:57:35 AM2/8/22

to Google Apps Script Community

And if that didn't work, here is another possible solution:
<meta name="viewport" content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Brett Grear

unread,

Feb 8, 2022, 9:08:39 AM2/8/22

to Google Apps Script Community

Thanks for the advice. I had tried maximum-scale=1.0; user-scalable=0 before but it doesn't work. Apparently mobile browsers now ignore it in the same of accessibility.

I had not tried target-densitydpi=device-dpi but I just did that then and still the problem persists.

cool water

unread,

Feb 22, 2022, 4:52:17 PM2/22/22

to Google Apps Script Community

Hi there,

I know there is a solution, you need to change your doGet function just like this. Check this.

function doGet(request) {

var template = HtmlService.createTemplateFromFile('Index');

var html = template.evaluate()

var htmlOutput = HtmlService.createHtmlOutput(html);

htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');

return htmlOutput

}

Matthieu Simon

unread,

Mar 7, 2022, 5:07:27 AM3/7/22

to Google Apps Script Community

Hello all ! just found your issue conversations, did you found a solution about it ?

Brett Grear

unread,

Mar 7, 2022, 10:10:24 AM3/7/22

to Google Apps Script Community

Sorry! I've been busy with work and only just got back to this. It was a great idea but the behaviour is still the same on my Pixel 6 Pro.

I have updated the example script that I posted above with your suggestion.

I have also managed to verify that is is happening on other Pixel 6 Pros. Not just mine.

It must have something to do with the dimensions of the device? Or something else?

I haven't found any other devices that also zoom in way too far but I could be wrong. I don't have access to every device.

Matthieu Simon

unread,

Mar 8, 2022, 6:33:23 AM3/8/22

to Google Apps Script Community

Same on other Smartphone

Oralpath Support Desk

unread,

Mar 8, 2022, 7:40:48 AM3/8/22

to google-apps-sc...@googlegroups.com

I'm experiencing the exact same issue with my webapp. It's actually making it inoperable on mobile devices. What the heck did Google do?

--

You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/45053462-ea0b-47c5-b3b4-21fe0562df4dn%40googlegroups.com.

This message and any attachments are intended only for the addressee(s) named in this message. This message is intended to be and to remain confidential. If you are not the intended recipient, please immediately contact us by phone at 800-401-5328 or you can email us at sup...@oralpath.ca. You must then delete this message. Thank You.

Matthieu Simon

unread,

Mar 9, 2022, 5:07:54 AM3/9/22

to Google Apps Script Community

Hey all , meta in html not working , you have ti put meta when you generate the HTML and put this balise on the HTML page

This will uderstand to take the meta frame

Brett Grear

unread,

Mar 9, 2022, 5:15:48 AM3/9/22

to google-apps-sc...@googlegroups.com

Yes, the example script I shared has that in the html already. It works fine on most phone brands. I’m not sure what is causing it on Pixel 6 Pro.

You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/YYukEo4EMSU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/33dcdf1f-5cb0-482d-b42c-8c0096d206a5n%40googlegroups.com.

--

Kind regards,

Mr Grear

St Vincent's Primary School

Pedro Silva

unread,

Apr 4, 2022, 4:46:13 AM4/4/22

to Google Apps Script Community

Buenas tardes a todos,
Yo tambien estaba como loco con este problema, y encontre la solución!!!!
Tan solo con añadir en la etiqueta meta lo siguiente:
name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
La solución la encontre en :

https://stackoverflow.com/questions/6483425/prevent-iphone-from-zooming-in-on-select-in-web-app

Espero que les sirva de tanta ayuda como a mi.
Feliz codigo!!!!

นฤเทพ พรหมเทศน์

unread,

Apr 26, 2022, 10:59:41 AM4/26/22

to Google Apps Script Community

You will need to set up by following this link. by changing the value in the code.gs section

https://stackoverflow.com/questions/56423742/my-page-doesnt-scale-in-google-app-script-only-on-mobile-and-when-not-in-lands

-----------------------------------------------------

function doGet(e) {

var template = HtmlService.createTemplateFromFile('index');

var html = template.evaluate()

.setTitle('Title');

var htmlOutput = HtmlService.createHtmlOutput(html);

htmlOutput.addMetaTag('viewport', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no');

return htmlOutput

}

-----------------------------------------------------

ในวันที่ วันจันทร์ที่ 7 กุมภาพันธ์ ค.ศ. 2022 เวลา 21 นาฬิกา 33 นาที 38 วินาที UTC+7 bgrea...@stvps.co.uk เขียนว่า:

นฤเทพ พรหมเทศน์

unread,

Apr 26, 2022, 11:01:16 AM4/26/22

to Google Apps Script Community

ในวันที่ วันอังคารที่ 26 เมษายน ค.ศ. 2022 เวลา 21 นาฬิกา 59 นาที 41 วินาที UTC+7 นฤเทพ พรหมเทศน์ เขียนว่า:

นฤเทพ พรหมเทศน์

unread,

Apr 26, 2022, 11:01:56 AM4/26/22

to Google Apps Script Community

https://script.google.com/macros/s/AKfycbxUvZqSPpmwaO15hgrklhXNB-wiCrA1PBilC8nZR0ag-M-ewaoT3vQ_gk-tnEEHqr7_/exec

ในวันที่ วันอังคารที่ 26 เมษายน ค.ศ. 2022 เวลา 22 นาฬิกา 01 นาที 16 วินาที UTC+7 นฤเทพ พรหมเทศน์ เขียนว่า:

Reply all

Reply to author

Forward