[www] Make iPhone X compatible (#9449)

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->

This should fix #9448. 
Also added padding to the banner, layout and desktop navigation to make sure it also works in landscape mode on the iPhone X
![img_0218](https://user-images.githubusercontent.com/13830735/47585018-794b5980-d95c-11e8-9a4e-8d7da85c47e6.PNG)

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")`

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

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]: {

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