diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
new file mode 100644
index 0000000..0ba8230
--- /dev/null
+++ b/.github/workflows/static.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/celestial.css b/celestial.css
index c725b9c..0870946 100644
--- a/celestial.css
+++ b/celestial.css
@@ -1,6 +1,6 @@
 /* Copyright 2015-16 Olaf Frohn https://github.com/ofrohn, see LICENSE */
 
-#celestial-map { width: 100%; height: auto; margin: 0; padding: 0; display: inline-block; position: relative; min-width:720px; overflow: visible; }
+#celestial-map { width: 100%; height: auto; margin: 0; padding: 0; display: inline-block; position: relative; min-width: 320px; overflow: visible; }
 #celestial-map canvas { display: inline-block; position:relative; z-index:0; cursor:hand; cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; }
 #celestial-map canvas:active { cursor:move; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }
 #d3-celestial-footer { text-align:center; color:#666; font:10pt/1 'Arial Unicode MS', Arial, Helvetica, sans-serif; }
@@ -69,9 +69,9 @@ input[type="number"]::-webkit-outer-spin-button { height: auto; }
 #celestial-form br + label { margin-left:0; }
 
 /* Zoom controls */
-#celestial-zoomin, 
-#celestial-zoomout { width:32px; height:32px; left:8px; top:12px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; }
-#celestial-zoomout { top: 48px; }
+#celestial-zoomin,
+#celestial-zoomout { width:44px; height:44px; left:8px; top:12px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; display: flex; align-items: center; justify-content: center; }
+#celestial-zoomout { top: 60px; }
 #celestial-zoomin:hover, 
 #celestial-zoomout:hover { background: rgba(255,255,255,0.7); }
 #celestial-zoomin:disabled, 
@@ -103,6 +103,96 @@ input[type="number"]::-webkit-outer-spin-button { height: auto; }
   #celestial-zoomin, #celestial-zoomout, #celestial-form { display: none; }
 }
 
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  /* Stack map and form vertically on tablets and mobile */
+  #celestial-map {
+    display: block;
+    width: 100%;
+    min-width: 320px;
+  }
+
+  #celestial-form {
+    display: block;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  /* Make form inputs responsive */
+  #celestial-form input[type='text'] {
+    width: calc(100% - 10px);
+    max-width: 300px;
+  }
+
+  #celestial-form .col {
+    white-space: normal;
+  }
+
+  /* Ensure zoom controls are accessible */
+  #celestial-zoomin,
+  #celestial-zoomout {
+    width: 48px;
+    height: 48px;
+    font-size: 28px;
+  }
+
+  #celestial-zoomout {
+    top: 64px;
+  }
+}
+
+@media (max-width: 480px) {
+  /* Phone-specific adjustments */
+  #celestial-map {
+    min-width: 100%;
+  }
+
+  /* Adjust footer for small screens */
+  #d3-celestial-footer {
+    font-size: 9pt;
+    padding: 5px;
+  }
+
+  /* Make form elements more touch-friendly */
+  #celestial-form input[type='button'],
+  #celestial-form select {
+    height: 32px;
+    font-size: 14px;
+  }
+
+  #celestial-form input#download-png,
+  #celestial-form input#download-svg {
+    width: 100%;
+    max-width: 200px;
+    height: 32px;
+  }
+
+  /* Date picker adjustments */
+  #celestial-date {
+    width: 95%;
+    max-width: 300px;
+  }
+}
+
+/* Touch device improvements */
+@media (hover: none) and (pointer: coarse) {
+  /* Increase tap target sizes for touch devices */
+  #celestial-form input[type='checkbox'] {
+    width: 20px;
+    height: 20px;
+  }
+
+  #celestial-form input[type='button'] {
+    min-height: 44px;
+    padding: 8px 12px;
+  }
+
+  /* Disable hover effects on touch devices */
+  #celestial-map canvas {
+    cursor: default;
+  }
+}
+
 /* SVG styles
 
 svg .constname {
diff --git a/demo/altstars.html b/demo/altstars.html
index c46fae8..fc19726 100644
--- a/demo/altstars.html
+++ b/demo/altstars.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Alternative Stars</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/chinese.html b/demo/chinese.html
index 8a4178e..340d7b6 100644
--- a/demo/chinese.html
+++ b/demo/chinese.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Traditional Chinese Constellations</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/language.html b/demo/language.html
index 22b3db0..4e613a3 100644
--- a/demo/language.html
+++ b/demo/language.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Language Options</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/location.html b/demo/location.html
index 99c1f51..7cf18a4 100644
--- a/demo/location.html
+++ b/demo/location.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Starmap</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/map.html b/demo/map.html
index 05af10a..863137a 100644
--- a/demo/map.html
+++ b/demo/map.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Star Map</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/mobile.html b/demo/mobile.html
new file mode 100644
index 0000000..521afd5
--- /dev/null
+++ b/demo/mobile.html
@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <title>D3-Celestial Mobile Planetarium</title>
+  <script type="text/javascript" src="../lib/d3.min.js"></script>
+  <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
+  <script type="text/javascript" src="../celestial.min.js"></script>
+  <link rel="stylesheet" href="../celestial.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: #000;
+      color: #fff;
+      overflow: hidden;
+      height: 100vh;
+      width: 100vw;
+    }
+
+    /* Main container */
+    #app-container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      width: 100vw;
+    }
+
+    /* Modern header */
+    #mobile-header {
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      padding: 12px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+      z-index: 1000;
+    }
+
+    #mobile-header h1 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #fff;
+    }
+
+    /* Map container - takes most of the screen */
+    #map-container {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      background: #000;
+    }
+
+    #celestial-map {
+      width: 100% !important;
+      height: 100% !important;
+      display: block !important;
+      position: absolute !important;
+      top: 0;
+      left: 0;
+    }
+
+    /* Modern toolbar */
+    #mobile-toolbar {
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      padding: 12px 16px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
+    }
+
+    /* Modern buttons */
+    .mobile-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 12px;
+      color: #fff;
+      padding: 12px 20px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(10px);
+      min-width: 44px;
+      min-height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .mobile-btn:active {
+      transform: scale(0.95);
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .mobile-btn.primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+    }
+
+    .mobile-btn.icon-only {
+      width: 44px;
+      padding: 12px;
+    }
+
+    /* Gesture hints */
+    #gesture-hints {
+      position: absolute;
+      top: 80px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(10px);
+      padding: 16px 24px;
+      border-radius: 12px;
+      text-align: center;
+      z-index: 100;
+      animation: fadeInOut 4s ease-in-out;
+      pointer-events: none;
+    }
+
+    #gesture-hints.hidden {
+      display: none;
+    }
+
+    @keyframes fadeInOut {
+      0%, 100% { opacity: 0; }
+      10%, 90% { opacity: 1; }
+    }
+
+    /* Welcome wizard */
+    #wizard-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.95);
+      z-index: 2000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    #wizard-overlay.hidden {
+      display: none;
+    }
+
+    #wizard-content {
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      border-radius: 20px;
+      padding: 32px 24px;
+      max-width: 400px;
+      text-align: center;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+    }
+
+    #wizard-content h2 {
+      font-size: 24px;
+      margin-bottom: 16px;
+      color: #fff;
+    }
+
+    #wizard-content p {
+      font-size: 16px;
+      line-height: 1.6;
+      color: rgba(255, 255, 255, 0.8);
+      margin-bottom: 24px;
+    }
+
+    .wizard-step {
+      display: none;
+    }
+
+    .wizard-step.active {
+      display: block;
+    }
+
+    .wizard-icon {
+      font-size: 48px;
+      margin-bottom: 20px;
+    }
+
+    .wizard-buttons {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+    }
+
+    /* Fullscreen styles */
+    #app-container:fullscreen,
+    #app-container:-webkit-full-screen,
+    #app-container:-moz-full-screen {
+      width: 100vw;
+      height: 100vh;
+    }
+
+    /* Landscape optimizations */
+    @media (orientation: landscape) {
+      #mobile-header {
+        padding: 8px 16px;
+      }
+
+      #mobile-header h1 {
+        font-size: 16px;
+      }
+
+      #mobile-toolbar {
+        padding: 8px 16px;
+      }
+    }
+
+    /* Loading indicator */
+    #loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      z-index: 50;
+    }
+
+    .spinner {
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-top: 3px solid #667eea;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 16px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    /* Custom zoom controls */
+    #celestial-zoomin,
+    #celestial-zoomout {
+      background: rgba(255, 255, 255, 0.15) !important;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2) !important;
+      color: #fff !important;
+      border-radius: 12px !important;
+    }
+  </style>
+</head>
+<body>
+  <!-- Welcome Wizard -->
+  <div id="wizard-overlay">
+    <div id="wizard-content">
+      <div class="wizard-step active" id="step1">
+        <div class="wizard-icon">🌟</div>
+        <h2>Welcome to the Planetarium!</h2>
+        <p>Explore the night sky with an interactive star map. Let's show you how it works.</p>
+        <div class="wizard-buttons">
+          <button class="mobile-btn primary" onclick="nextWizardStep()">Get Started</button>
+        </div>
+      </div>
+
+      <div class="wizard-step" id="step2">
+        <div class="wizard-icon">👆</div>
+        <h2>Pan & Rotate</h2>
+        <p>Drag your finger across the screen to rotate the sky and explore different regions.</p>
+        <div class="wizard-buttons">
+          <button class="mobile-btn" onclick="nextWizardStep()">Next</button>
+        </div>
+      </div>
+
+      <div class="wizard-step" id="step3">
+        <div class="wizard-icon">🤏</div>
+        <h2>Zoom In & Out</h2>
+        <p>Pinch with two fingers to zoom in and see more detail, or spread to zoom out.</p>
+        <div class="wizard-buttons">
+          <button class="mobile-btn" onclick="nextWizardStep()">Next</button>
+        </div>
+      </div>
+
+      <div class="wizard-step" id="step4">
+        <div class="wizard-icon">📱</div>
+        <h2>Fullscreen Mode</h2>
+        <p>Tap the fullscreen button below for an immersive experience. Rotate your device for the best view!</p>
+        <div class="wizard-buttons">
+          <button class="mobile-btn primary" onclick="closeWizard()">Start Exploring</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main App -->
+  <div id="app-container">
+    <!-- Header -->
+    <div id="mobile-header">
+      <h1>✨ Night Sky</h1>
+      <button class="mobile-btn icon-only" onclick="showWizard()" title="Help">
+        ?
+      </button>
+    </div>
+
+    <!-- Map Container -->
+    <div id="map-container">
+      <div id="loading">
+        <div class="spinner"></div>
+        <p>Loading stars...</p>
+      </div>
+      <div id="celestial-map"></div>
+      <div id="gesture-hints">
+        👆 Drag to rotate • 🤏 Pinch to zoom
+      </div>
+    </div>
+
+    <!-- Bottom Toolbar -->
+    <div id="mobile-toolbar">
+      <button class="mobile-btn" onclick="resetView()" title="Reset View">
+        🔄 Reset
+      </button>
+      <button class="mobile-btn" onclick="toggleFullscreen()" id="fullscreen-btn" title="Fullscreen">
+        ⛶ Fullscreen
+      </button>
+      <button class="mobile-btn" onclick="getCurrentLocation()" title="My Location">
+        📍 Location
+      </button>
+    </div>
+  </div>
+
+  <script>
+    // Configuration
+    var config = {
+      width: 0,
+      projection: "stereographic",
+      transform: "equatorial",
+      center: null,
+      orientationfixed: true,
+      background: { fill: "#000000", stroke: "#000000", opacity: 1 },
+      adaptable: true,
+      interactive: true,
+      disableAnimations: false,
+      form: false,
+      controls: true,
+      container: "celestial-map",
+      datapath: "../data/",
+      stars: {
+        show: true,
+        limit: 6,
+        colors: true,
+        style: { fill: "#ffffff", opacity: 1 },
+        names: false,
+        proper: false,
+        desig: false,
+        size: 7,
+        exponent: -0.28,
+        data: 'stars.6.json'
+      },
+      dsos: {
+        show: true,
+        limit: 6,
+        names: false,
+        desig: false,
+        size: null,
+        exponent: 1.4,
+        data: 'dsos.bright.json',
+        symbols: {
+          gg: {shape: "circle", fill: "#ff0000"},
+          g:  {shape: "ellipse", fill: "#ff0000"},
+          s:  {shape: "ellipse", fill: "#ff0000"},
+          s0: {shape: "ellipse", fill: "#ff0000"},
+          sd: {shape: "ellipse", fill: "#ff0000"},
+          e:  {shape: "ellipse", fill: "#ff0000"},
+          i:  {shape: "ellipse", fill: "#ff0000"},
+          oc: {shape: "circle", fill: "#ffcc00", stroke: "#ffcc00", width: 1.5},
+          gc: {shape: "circle", fill: "#ff9900"},
+          en: {shape: "square", fill: "#ff00cc"},
+          bn: {shape: "square", fill: "#ff00cc", stroke: "#ff00cc", width: 2},
+          sfr:{shape: "square", fill: "#cc00ff", stroke: "#cc00ff", width: 2},
+          rn: {shape: "square", fill: "#00ooff"},
+          pn: {shape: "diamond", fill: "#00cccc"},
+          snr:{shape: "diamond", fill: "#ff00cc"},
+          dn: {shape: "square", fill: "#999999", stroke: "#999999", width: 2},
+          pos:{shape: "marker", fill: "#cccccc", stroke: "#cccccc", width: 1.5}
+        }
+      },
+      constellations: {
+        show: true,
+        names: true,
+        desig: false,
+        namestyle: { fill:"#cccc99", align: "center", baseline: "middle", opacity: 0.8,
+                     font: ["14px Helvetica, Arial, sans-serif",
+                            "12px Helvetica, Arial, sans-serif",
+                            "11px Helvetica, Arial, sans-serif"]},
+        lines: true,
+        linestyle: { stroke: "#cccccc", width: 1, opacity: 0.4 },
+        bounds: false
+      },
+      mw: {
+        show: true,
+        style: { fill: "#ffffff", opacity: "0.12" }
+      },
+      lines: {
+        graticule: { show: false },
+        equatorial: { show: false },
+        ecliptic: { show: false },
+        galactic: { show: false },
+        supergalactic: { show: false }
+      }
+    };
+
+    // Wizard state
+    var currentStep = 1;
+    var wizardShown = localStorage.getItem('wizardShown') !== 'true';
+
+    function nextWizardStep() {
+      document.getElementById('step' + currentStep).classList.remove('active');
+      currentStep++;
+      if (currentStep <= 4) {
+        document.getElementById('step' + currentStep).classList.add('active');
+      }
+    }
+
+    function closeWizard() {
+      document.getElementById('wizard-overlay').classList.add('hidden');
+      localStorage.setItem('wizardShown', 'true');
+      setTimeout(showGestureHints, 500);
+    }
+
+    function showWizard() {
+      currentStep = 1;
+      document.querySelectorAll('.wizard-step').forEach(step => step.classList.remove('active'));
+      document.getElementById('step1').classList.add('active');
+      document.getElementById('wizard-overlay').classList.remove('hidden');
+    }
+
+    function showGestureHints() {
+      var hints = document.getElementById('gesture-hints');
+      hints.classList.remove('hidden');
+      setTimeout(() => hints.classList.add('hidden'), 4000);
+    }
+
+    // Initialize the map
+    window.addEventListener('load', function() {
+      Celestial.display(config);
+      document.getElementById('loading').style.display = 'none';
+
+      // Show wizard on first visit
+      if (!wizardShown) {
+        // Wizard is already visible by default
+      } else {
+        document.getElementById('wizard-overlay').classList.add('hidden');
+        setTimeout(showGestureHints, 1000);
+      }
+    });
+
+    // Fullscreen functionality
+    function toggleFullscreen() {
+      var container = document.getElementById('app-container');
+      var btn = document.getElementById('fullscreen-btn');
+
+      if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement) {
+        if (container.requestFullscreen) {
+          container.requestFullscreen();
+        } else if (container.webkitRequestFullscreen) {
+          container.webkitRequestFullscreen();
+        } else if (container.mozRequestFullScreen) {
+          container.mozRequestFullScreen();
+        }
+        btn.innerHTML = '⛶ Exit';
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        }
+        btn.innerHTML = '⛶ Fullscreen';
+      }
+    }
+
+    // Reset view
+    function resetView() {
+      Celestial.rotate({center: [0, 0, 0]});
+      Celestial.zoomBy(1/Celestial.zoomBy());
+    }
+
+    // Get current location
+    function getCurrentLocation() {
+      if ('geolocation' in navigator) {
+        navigator.geolocation.getCurrentPosition(function(position) {
+          var lat = position.coords.latitude;
+          var lon = position.coords.longitude;
+          Celestial.location([lat, lon]);
+          alert('Location set to: ' + lat.toFixed(2) + '°, ' + lon.toFixed(2) + '°');
+        }, function(error) {
+          alert('Unable to get location. Please enable location services.');
+        });
+      } else {
+        alert('Geolocation is not supported by your device.');
+      }
+    }
+
+    // Handle orientation changes
+    window.addEventListener('orientationchange', function() {
+      setTimeout(() => {
+        Celestial.resize();
+      }, 200);
+    });
+
+    // Handle resize
+    window.addEventListener('resize', function() {
+      Celestial.resize();
+    });
+  </script>
+</body>
+</html>
diff --git a/demo/planets-animation.html b/demo/planets-animation.html
index e38fa9d..d62f467 100644
--- a/demo/planets-animation.html
+++ b/demo/planets-animation.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Starmap</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/sky.html b/demo/sky.html
index 7fe2b9b..1d29cbf 100644
--- a/demo/sky.html
+++ b/demo/sky.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Starry Sky Map</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/skyview.html b/demo/skyview.html
index ad6b5c7..8d2cfba 100644
--- a/demo/skyview.html
+++ b/demo/skyview.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Presets</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/snr.html b/demo/snr.html
index f348318..3a51451 100644
--- a/demo/snr.html
+++ b/demo/snr.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Supernova Remnants</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/triangle.html b/demo/triangle.html
index 0e9536a..a0b4a02 100644
--- a/demo/triangle.html
+++ b/demo/triangle.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Summer Triangle</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/viewer.html b/demo/viewer.html
index 8b84a27..8a6e8f1 100644
--- a/demo/viewer.html
+++ b/demo/viewer.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Starmap</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
diff --git a/demo/wallmap.html b/demo/wallmap.html
index 9d9cd8b..2385394 100644
--- a/demo/wallmap.html
+++ b/demo/wallmap.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Wall Map</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>