Make viewport width a variable value

So that we can allow some pages to be responsive

src/routes.json

@@ -57,19 +57,22 @@
         "name": "conference-index",
         "pattern": "^/conference$",
         "view": "conference/index/index",
-        "title": "Scratch Conference"
+        "title": "Scratch Conference",
+        "viewportWidth": "device-width"
     },
     {
         "name": "conference-plan",
         "pattern": "^/conference/plan$",
         "view": "conference/plan/plan",
-        "title": "Plan Your Visit"
+        "title": "Plan Your Visit",
+        "viewportWidth": "device-width"
     },
     {
         "name": "conference-expectations",
         "pattern": "^/conference/expect$",
         "view": "conference/expect/expect",
-        "title": "What to Expect"
+        "title": "What to Expect",
+        "viewportWidth": "device-width"
     },
     {
         "name": "donate",

src/template-config.js

@@ -9,6 +9,9 @@ module.exports = {
         'where you can create your own interactive stories, games, ' +
         'and animations.',
 
+    // override if mobile-friendly
+    viewportWidth: 942,
+
     // Open graph
     og_image: 'https://scratch.mit.edu/images/scratch-og.png',
     og_image_type: 'image/png',

src/template.html

@@ -7,7 +7,7 @@
 
         <meta http-equiv="x-ua-compatible" content="ie=edge">
         <meta http-equiv="x-frame-options" content="deny">
-        <meta name="viewport" content="width=942, initial-scale=1">
+        <meta name="viewport" content="width={{viewportWidth}}, initial-scale=1">
 
         <title>Scratch - {{title}}</title>