mui · oliviertassinari · Aug 15, 2018 · Aug 15, 2018
diff --git a/docs/src/pages/getting-started/installation/installation.md b/docs/src/pages/getting-started/installation/installation.md
@@ -41,3 +41,18 @@ you must first install the [@material-ui/icons](https://www.npmjs.com/package@ma
 ```sh
 npm install @material-ui/icons
 ```
+
+## CDN
+
+You can start using Material-UI with minimal Front-end infrastructure,
+which is great for prototyping. We discourage using this approach in production though -
+the client has to download the entire library, regardless of which components are actually used,
+affecting performance and bandwidth utilisation.
+
+#### UMD releases
+
+We are providing two Universal Module Definition (UMD) files:
+- one for development: https://unpkg.com/@material-ui/core/umd/material-ui.development.js
+- one for production: https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js
+
+You can follow [this CDN example](https://github.com/mui-org/material-ui/tree/master/examples/cdn) to quickly get started.
diff --git a/docs/src/pages/getting-started/usage/usage.md b/docs/src/pages/getting-started/usage/usage.md
@@ -5,7 +5,6 @@
 Material-UI components work in isolation.
 **They are self-supporting**, and will inject, and only inject, the styles they need to display.
 They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/),
-although Material-UI does provide an optional [CssBaseline](/style/css-baseline) component.
 
 You can use any of the components as demonstrated in the documentation.
 Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported.
@@ -34,6 +33,27 @@ Yes, this really is all you need to get started, as you can see in this live and
 
 {{"demo": "pages/getting-started/usage/Usage.js", "hideHeader": true}}
 
+## Globals
+
+Material-UI usage experience can be improved with a handful of important global that you’ll need to be aware of.
+
+### Responsive meta tag
+
+Material-UI is developed mobile first, a strategy in which we first write code for mobile devices and then scale up components as necessary using CSS media queries.
+To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>` element.
+
+```html
+<meta
+  name="viewport"
+  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+/>
+```
+
+### CssBaseline
+
+Material-UI provides an optional [CssBaseline](/style/css-baseline) component.
+It's fixing some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
+
 ## Versioned Documentation
 
 This documentation always reflects the latest stable version of Material-UI.

diff --git a/examples/cdn/README.md b/examples/cdn/README.md
@@ -18,7 +18,7 @@ open index.html
 ## The idea behind the example
 
 You can start using Material-UI with minimal Front-end infrastructure,
-which is great for prototyping. Don't use this approach in production though -
+which is great for prototyping. We discourage using this approach in production though -
 the client has to download the entire library, regardless of which components are actually used,
 affecting performance and bandwidth utilisation.
 

diff --git a/examples/create-react-app-with-jss/public/index.html b/examples/create-react-app-with-jss/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
     <!-- PWA primary color -->
     <meta name="theme-color" content="#000000">
     <!--

diff --git a/examples/create-react-app-with-typescript/public/index.html b/examples/create-react-app-with-typescript/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
     <!-- PWA primary color -->
     <meta name="theme-color" content="#000000">
     <!--

diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
     <!-- PWA primary color -->
     <meta name="theme-color" content="#000000">
     <title>My page</title>

diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
@@ -15,10 +15,7 @@ class MyDocument extends Document {
           {/* Use minimum-scale=1 to enable GPU rasterization */}
           <meta
             name="viewport"
-            content={
-              'user-scalable=0, initial-scale=1, ' +
-              'minimum-scale=1, width=device-width, height=device-height'
-            }
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
           />
           {/* PWA primary color */}
           <meta name="theme-color" content={pageContext.theme.palette.primary.main} />

diff --git a/examples/parcel/src/index.html b/examples/parcel/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <title>My page</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height">
+    <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" />
   </head>
   <body>

diff --git a/pages/_document.js b/pages/_document.js
@@ -31,10 +31,7 @@ class MyDocument extends Document {
           {/* Use minimum-scale=1 to enable GPU rasterization */}
           <meta
             name="viewport"
-            content={
-              'user-scalable=0, initial-scale=1, ' +
-              'minimum-scale=1, width=device-width, height=device-height'
-            }
+            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