diff --git a/www/src/components/banner.js b/www/src/components/banner.js
index cb9b5b0adcb00..6b5f5b41c3cce 100644
--- a/www/src/components/banner.js
+++ b/www/src/components/banner.js
@@ -15,6 +15,8 @@ const BannerContainer = styled("div")`
   position: fixed;
   width: 100%;
   z-index: 3;
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
 `
 
 const InnerContainer = styled("div")`
diff --git a/www/src/components/layout.js b/www/src/components/layout.js
index 9a50e76b3ec4c..82cad9f4bbb10 100644
--- a/www/src/components/layout.js
+++ b/www/src/components/layout.js
@@ -148,6 +148,10 @@ class DefaultLayout extends React.Component {
     return (
       <div className={isHomepage ? `is-homepage` : ``}>
         <Helmet defaultTitle={`GatsbyJS`} titleTemplate={`%s | GatsbyJS`}>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+          />
           <meta name="twitter:site" content="@gatsbyjs" />
           <meta property="og:type" content="website" />
           <meta property="og:site_name" content="GatsbyJS" />
@@ -194,6 +198,8 @@ class DefaultLayout extends React.Component {
                 ? presets.bannerHeight
                 : `calc(${presets.bannerHeight} + ${presets.headerHeight})`,
             },
+            paddingLeft: `env(safe-area-inset-left)`,
+            paddingRight: `env(safe-area-inset-right)`,
           }}
         >
           <PageWithSidebar
diff --git a/www/src/components/navigation-mobile.js b/www/src/components/navigation-mobile.js
index ae73035818305..882bc8438c54a 100644
--- a/www/src/components/navigation-mobile.js
+++ b/www/src/components/navigation-mobile.js
@@ -63,7 +63,7 @@ const MobileNavigation = () => (
         zIndex: 1,
         borderTop: `1px solid ${colors.ui.border}`,
         background: colors.ui.whisper,
-        height: presets.headerHeight,
+        minHeight: presets.headerHeight,
         fontFamily: typography.options.headerFontFamily.join(`,`),
         paddingBottom: `env(safe-area-inset-bottom)`,
         [presets.Tablet]: {
diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
index 0ee2e8b923752..b1f0ea8eb6c4f 100644
--- a/www/src/components/navigation.js
+++ b/www/src/components/navigation.js
@@ -98,6 +98,8 @@ const Navigation = ({ pathname }) => {
           position: isHomepage || isBlog ? `absolute` : `fixed`,
           backgroundColor: isBlog ? colors.ui.whisper : false,
         },
+        paddingLeft: `env(safe-area-inset-left)`,
+        paddingRight: `env(safe-area-inset-right)`,
       }}
     >
       <div