diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 0c19a78b474f54..ebbfb63104724e 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -35,11 +35,6 @@ export default class MyDocument extends Document {
     return (
       <html lang={userLanguage}>
         <Head>
-          {/* Use minimum-scale=1 to enable GPU rasterization. */}
-          <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-          />
           {/*
             manifest.json provides metadata used when your web app is added to the
             homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js
index 8b14f98ff33047..201ba8eae61ad9 100644
--- a/docs/src/modules/components/Head.js
+++ b/docs/src/modules/components/Head.js
@@ -12,6 +12,11 @@ export default function Head(props) {
 
   return (
     <NextHead>
+      {/* Use minimum-scale=1 to enable GPU rasterization. */}
+      <meta
+        name="viewport"
+        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+      />
       <title>{title}</title>
       <meta name="description" content={description} />
       {/* Twitter */}
diff --git a/examples/create-react-app-with-typescript/public/index.html b/examples/create-react-app-with-typescript/public/index.html
index 079d36adb3be60..1be5fcdacef506 100644
--- a/examples/create-react-app-with-typescript/public/index.html
+++ b/examples/create-react-app-with-typescript/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html
index 7a68456873a622..e528e3c80bda11 100644
--- a/examples/create-react-app/public/index.html
+++ b/examples/create-react-app/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/examples/nextjs-with-typescript/pages/_app.tsx b/examples/nextjs-with-typescript/pages/_app.tsx
index ad7c84d989fa52..30bd189991523b 100644
--- a/examples/nextjs-with-typescript/pages/_app.tsx
+++ b/examples/nextjs-with-typescript/pages/_app.tsx
@@ -20,17 +20,11 @@ export default class MyApp extends App {
     return (
       <React.Fragment>
         <Head>
+          <title>My page</title>
           <meta
             name="viewport"
             content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
           />
-          <title>My page</title>
-          {/* PWA primary color */}
-          <meta name="theme-color" content={theme.palette.primary.main} />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-          />
         </Head>
         <ThemeProvider theme={theme}>
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/nextjs-with-typescript/pages/_document.tsx
index 2854265564f39d..205055b69e5523 100644
--- a/examples/nextjs-with-typescript/pages/_document.tsx
+++ b/examples/nextjs-with-typescript/pages/_document.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/core/styles';
+import theme from '../src/theme';
 
 export default class MyDocument extends Document {
   render() {
     return (
       <html lang="en">
-        <Head />
+        <Head>
+          {/* PWA primary color */}
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+        </Head>
         <body>
           <Main />
           <NextScript />
diff --git a/examples/nextjs/pages/_app.js b/examples/nextjs/pages/_app.js
index cf05ea2c2355a0..8235f7f1324ae9 100644
--- a/examples/nextjs/pages/_app.js
+++ b/examples/nextjs/pages/_app.js
@@ -20,17 +20,11 @@ export default class MyApp extends App {
     return (
       <React.Fragment>
         <Head>
+          <title>My page</title>
           <meta
             name="viewport"
             content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
           />
-          <title>My page</title>
-          {/* PWA primary color */}
-          <meta name="theme-color" content={theme.palette.primary.main} />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-          />
         </Head>
         <ThemeProvider theme={theme}>
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
index 2854265564f39d..205055b69e5523 100644
--- a/examples/nextjs/pages/_document.js
+++ b/examples/nextjs/pages/_document.js
@@ -1,12 +1,20 @@
 import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/core/styles';
+import theme from '../src/theme';
 
 export default class MyDocument extends Document {
   render() {
     return (
       <html lang="en">
-        <Head />
+        <Head>
+          {/* PWA primary color */}
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+        </Head>
         <body>
           <Main />
           <NextScript />
diff --git a/examples/preact/public/index.html b/examples/preact/public/index.html
index 15ee19d240e8c5..7461293adda2f7 100644
--- a/examples/preact/public/index.html
+++ b/examples/preact/public/index.html
@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
     <!--
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
index 0eb44692ce2e78..f1ca40f893b423 100644
--- a/examples/ssr/server.js
+++ b/examples/ssr/server.js
@@ -13,8 +13,7 @@ function renderFullPage(html, css) {
       <head>
         <title>My page</title>
         <style id="jss-server-side">${css}</style>
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        <!-- Fonts to support Material Design -->
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
       </head>
       <body>
