I am trying to create an app in Google apps script, but I want to display different layouts depending on the resolution of the screen (mobile & desktop). However, I can't find anything about how to determine the screen resolution.
Of course I can't determine the screen resolution from the server side, so I tried if I could do something with clientside handlers, but the ClientHandlers
don't have any method for screen resolution. I also tried to add a manual clientside script to the app using app.createHTML()
, however Google doesn't allow to include javascript using createHTML.
So how can I get the resolution of the browser using Google apps script?
Two dark theme are available in the IDE (themes only applies to the IDE, not to the full page) Use the "Sun/Moon" icon to toggle the dark mode on and off, To select a different color theme, open the IDE action menu with [F1] (while focusing the IDE), then type either "theme", or on of the following: - Darcula - Monokai ...
Run a test deploymentOpen the script project containing your add-on. Click Deploy > Test deployments. Under Saved Tests, select the radio button next to the saved test deployment you want to run and click Execute.
With Apps Script, you: Write code in JavaScript and access built-in libraries for Google Workspace applications like Gmail, Calendar, Drive, etc.
The JavaScript screen.witdth property does not work in GAS environment. The Google Caja sanitizer, which is under the hood of GAS, throws the
Uncaught script error: 'screen is not defined.' in source: 'tryit.asp?filename=tryjsref%5fscreen%5fwidth' at line: 7 tryit.asp?filename=tryjsref%5fscreen%5fwidth:7: screen is not defined.
exception if to load the following HTML page to the Caja Playground. Probably it is an issue of Caja.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Test");
document.write("Total Width: " + screen.width);
</script>
</body>
</html>
A possible workaround is not to rely upon a screen resolution but to use a user-agent string. This string contains the user browser "id". The UiApp.getUserAgent method returns it. For instance, Mozilla Firefox on a desktop provides this string like - Mozilla/5.0 (Windows NT 6.0; rv:15.0) Gecko/20100101 Firefox/15.0.1,gzip(gfe)
. On a mobile phone this string contains ...(Android; Mobile; rv:15.0)...
. A check procedure searches in the returned string the words Mobile
, Android
, etc. If one of them found it is a mobile platform and the main code draws a mobile GUI using relative controls sizes. The following code shows how to use it
function doGet(e) {
var app = UiApp.createApplication();
app.add(app.createLabel(UiApp.getUserAgent()));
return app;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With