Merge pull request #360 from keta1/fix/web

mikepenz · web-flow · commit d58406c32522 · 2025-03-30T18:38:01.000+02:00
Add viewport meta tag to `index.html`
diff --git a/sample/web/src/commonMain/resources/index.html b/sample/web/src/commonMain/resources/index.html
@@ -4,57 +4,11 @@
     <meta charset="UTF-8">
 
     <title>Markdown Sample (Kotlin/Wasm)</title>
-    <script type="application/javascript" src="skiko.js"></script>
     <script type="application/javascript" src="composeApp.js"></script>
-    <style>
-        html, body {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            background-color: white;
-            overflow: hidden;
-        }
-
-        #warning {
-            position: absolute;
-            top: 100px;
-            left: 100px;
-            max-width: 830px;
-            z-index: 100;
-            background-color: white;
-            font-size: initial;
-            display: none;
-        }
-        #warning li {
-            padding-bottom: 15px;
-        }
-
-        #warning span.code {
-            font-family: monospace;
-        }
-
-        ul {
-            margin-top: 0;
-            margin-bottom: 15px;
-        }
-
-        #footer {
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-            z-index: 1000;
-            background-color: white;
-            font-size: initial;
-        }
-
-        #close {
-            position: absolute;
-            top: 0;
-            right: 10px;
-            cursor: pointer;
-        }
-    </style>
+    <script type="application/javascript" src="unsupported_browser.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <!--https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts#mobile_viewports-->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <canvas id="markdownCanvas"></canvas>
@@ -77,18 +31,4 @@
     </ul>
 </div>
 </body>
-
-<script type="application/javascript" >
-    const unhandledError = (event, error) => {
-        if (error instanceof WebAssembly.CompileError) {
-            document.getElementById("warning").style.display="initial";
-
-            // Hide a Scary Webpack Overlay which is less informative in this case.
-            const webpackOverlay = document.getElementById("webpack-dev-server-client-overlay");
-            if (webpackOverlay != null) webpackOverlay.style.display="none";
-        }
-    }
-    addEventListener("error", (event) => unhandledError(event, event.error));
-    addEventListener("unhandledrejection", (event) => unhandledError(event, event.reason));
-</script>
 </html>
diff --git a/sample/web/src/commonMain/resources/styles.css b/sample/web/src/commonMain/resources/styles.css
@@ -0,0 +1,48 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: white;
+    overflow: hidden;
+}
+
+#warning {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    max-width: 830px;
+    z-index: 100;
+    background-color: white;
+    font-size: initial;
+    display: none;
+}
+
+#warning li {
+    padding-bottom: 15px;
+}
+
+#warning span.code {
+    font-family: monospace;
+}
+
+ul {
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+
+#footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 1000;
+    background-color: white;
+    font-size: initial;
+}
+
+#close {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    cursor: pointer;
+}
diff --git a/sample/web/src/commonMain/resources/unsupported_browser.js b/sample/web/src/commonMain/resources/unsupported_browser.js
@@ -0,0 +1,14 @@
+const unhandledError = (event, error) => {
+    if (error instanceof WebAssembly.CompileError) {
+        document.getElementById("warning").style.display = "initial";
+
+        // Hide a Scary Webpack Overlay which is less informative in this case.
+        const webpackOverlay = document.getElementById("webpack-dev-server-client-overlay");
+        if (webpackOverlay != null) {
+            webpackOverlay.style.display = "none";
+        }
+    }
+};
+
+addEventListener("error", (event) => unhandledError(event, event.error));
+addEventListener("unhandledrejection", (event) => unhandledError(event, event.reason));
