add a meta tag to set viewport options for mobile devices

src/Spec.ts

@@ -571,7 +571,8 @@ export default class Spec {
     this.buildReferenceGraph();
 
     this.highlightCode();
-    this.setCharset();
+    this.setMetaCharset();
+    this.setMetaViewport();
     const wrapper = this.buildSpecWrapper();
 
     let commonEles: HTMLElement[] = [];
@@ -1875,7 +1876,7 @@ ${this.opts.multipage ? `<li><span>Navigate to/from multipage</span><code>m</cod
   }
 
   /** @internal */
-  public setCharset() {
+  public setMetaCharset() {
     let current = this.spec.doc.querySelector('meta[charset]');
 
     if (!current) {
@@ -1886,6 +1887,18 @@ ${this.opts.multipage ? `<li><span>Navigate to/from multipage</span><code>m</cod
     current.setAttribute('charset', 'utf-8');
   }
 
+  /** @internal */
+  public setMetaViewport() {
+    let current = this.spec.doc.querySelector('meta[name=viewport]');
+
+    if (!current) {
+      let metaViewport = this.spec.doc.createElement('meta');
+      metaViewport.setAttribute('name', 'viewport');
+      metaViewport.setAttribute('content', 'width=device-width, initial-scale=1');
+      this.spec.doc.head.insertBefore(metaViewport, this.spec.doc.head.firstChild);
+    }
+  }
+
   private _updateBySelector(selector: string, contents: string) {
     const elem = this.doc.querySelector(selector);
     if (elem && elem.textContent!.trim().length > 0) {