iPhone X support

Adds a correctly-sized splash sceen image and ensures
the full viewport is used by the webview, as well as
adding sufficient vertical padding based on
`safe-area-inset-bottom` CSS variable.

1 files changed, 7 insertions, 0 deletions

diff --git a/www/js/app.js b/www/js/app.js
index 8502581..c45a333 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -278,6 +278,13 @@ var tpl = {
                 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
             }
             $('#load-screen').height( $(window).height() );
+
+            // Rough-and-ready iPhone X detection so CSS can stop things
+            // obscuring the home indicator at the bottom of the screen.
+            if (window.screen.width == 375 && window.screen.height == 812) {
+                $("body").addClass("iphone-x");
+            }
+
             FMS.initialized = 1;
             if ( navigator && navigator.splashscreen ) {
                 navigator.splashscreen.hide();