CB-12886: Fix for safe-area handling on iOS 11+
authorDarryl Pogue <darryl@dpogue.ca>
Sun, 17 Jun 2018 00:53:10 +0000 (17:53 -0700)
committerDarryl Pogue <darryl@dpogue.ca>
Sun, 2 Sep 2018 05:07:51 +0000 (22:07 -0700)
template_src/www/css/index.css
template_src/www/index.html

index 51daa79..88772d9 100644 (file)
@@ -38,9 +38,11 @@ body {
     background-attachment:fixed;
     font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
     font-size:12px;
-    height:100%;
+    height:100vh;
     margin:0px;
     padding:0px;
+    /* Padding to avoid the "unsafe" areas behind notches in the screen */
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
     text-transform:uppercase;
     width:100%;
 }
index 095e93b..d901e26 100644 (file)
@@ -31,7 +31,7 @@
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
-        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
         <link rel="stylesheet" type="text/css" href="css/index.css">
         <title>Hello World</title>
     </head>