Adapting for safe-area-inset on iOS iphone X type devices

with a notch/dynamic island.

src/index.html

@@ -13,7 +13,7 @@
   <meta name="application-name" content="qrcode-stencil-sample">
   <meta name="apple-mobile-web-app-title" content="qrcode-stencil-sample">
   <meta name="msapplication-starturl" content="https://doppelganger9.github.io/stencil-qrcode-component/">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="viewport" content="initial-scale=1,user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">
 
   <link rel="icon" type="images/png" sizes="216x216" href="assets/favicon.png">
   <link rel="apple-touch-icon" type="images/png" sizes="216x216" href="assets/favicon.png">
@@ -29,6 +29,33 @@
     });
   </script>
   <style>
+    /** To add padding to the notch/dynamic island for iOS iPhone X devices
+    (don't forget viewport-fit=cover in the meta viewport tag of your pages)
+     **/
+    /** iOS 11-11.2 **/
+    @supports (padding-top: constant(safe-area-inset-top)) {
+      body {
+        padding-top: constant(safe-area-inset-top);
+        padding-right: constant(safe-area-inset-right);
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-left: constant(safe-area-inset-left);
+      }
+    }
+    /** iOS 11.2+ (We also use CSS variables) **/
+    @supports (padding-top: env(safe-area-inset-top)) {
+      body {
+        --safe-area-inset-top: env(safe-area-inset-top);
+        --safe-area-inset-right: env(safe-area-inset-right);
+        --safe-area-inset-bottom: env(safe-area-inset-bottom);
+        --safe-area-inset-left: env(safe-area-inset-left);
+        padding-top: var(--safe-area-inset-top);
+        padding-right: var(--safe-area-inset-right);
+        padding-bottom: var(--safe-area-inset-bottom);
+        padding-left: var(--safe-area-inset-left);
+      }
+    }
+    /** other browsers : no safe area inset vars/envs **/
+
     qr-code {
       margin: 20px;
     }