CB-12886: Fix for safe-area handling on iOS 11+
diff --git a/template_src/www/css/index.css b/template_src/www/css/index.css
index 51daa79..88772d9 100644
--- a/template_src/www/css/index.css
+++ b/template_src/www/css/index.css
@@ -38,9 +38,11 @@
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%;
}
diff --git a/template_src/www/index.html b/template_src/www/index.html
index 095e93b..d901e26 100644
--- a/template_src/www/index.html
+++ b/template_src/www/index.html
@@ -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>
