iPhone X support (gatsbyjs#4835)

Adds support for the iPhone X safe area insets. Link: https://webkit.org/blog/7929/designing-websites-for-iphone-x/ Here’s a preview of what it looks like: https://twitter.com/codeOfRobin/status/981473964223430658 Signed-off-by: Robin Malhotra <me@rmalhotra.com>
philipedin · Apr 5, 2018 · 8822a25 · 8822a25
1 parent b4aefcc
commit 8822a25
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/www/src/components/navigation-mobile.js b/www/src/components/navigation-mobile.js
@@ -45,6 +45,7 @@ const MobileNavigation = () => (
       borderTop: `1px solid ${colors.ui.light}`,
       background: colors.ui.whisper,
       fontFamily: typography.options.headerFontFamily.join(`,`),
+      paddingBottom: `env(safe-area-inset-bottom)`,
       [presets.Tablet]: {
         display: `none`,
       },

diff --git a/www/src/html.js b/www/src/html.js
@@ -49,7 +49,7 @@ export default class HTML extends React.Component {
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
           <meta
             name="viewport"
-            content="width=device-width, initial-scale=1.0"
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
           />
           <link
             rel="apple-touch-icon"