DEV: Make interactive-widget viewport config chrome-only (#30889)

This stops it printing an error to the console in Safari

app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js

@@ -1,20 +0,0 @@
-/*
-  In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in.
-  But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes.
-*/
-export default {
-  initialize(container) {
-    if (!container.lookup("service:capabilities").isIOS) {
-      return;
-    }
-
-    const viewport = document.querySelector("meta[name=viewport]");
-    if (viewport) {
-      const current = viewport.getAttribute("content");
-      viewport.setAttribute(
-        "content",
-        current.replace("user-scalable=yes", "user-scalable=no")
-      );
-    }
-  },
-};

app/assets/javascripts/discourse/app/instance-initializers/viewport-setup.js

@@ -0,0 +1,31 @@
+let done = false;
+
+export default {
+  initialize(container) {
+    if (done) {
+      return;
+    }
+    done = true;
+
+    const caps = container.lookup("service:capabilities");
+    const viewport = document.querySelector("meta[name=viewport]");
+    if (!viewport) {
+      return;
+    }
+
+    let value = viewport.getAttribute("content");
+    if (caps.isIOS) {
+      // In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in.
+      // But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes.
+      value += ", user-scalable=no";
+    }
+
+    if (!caps.isSafari) {
+      // Safari prints a big red warning because it doesn't support this property.
+      // Add it for all other browsers.
+      value += ", interactive-widget=resizes-content";
+    }
+
+    viewport.setAttribute("content", value);
+  },
+};

app/views/layouts/_head.html.erb

@@ -8,7 +8,8 @@
 <%- end %>
 <%= discourse_theme_color_meta_tags %>
 <%= discourse_color_scheme_meta_tag %>
-<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover, interactive-widget=resizes-content">
+<%# viewport is updated further in instance-initializers/viewport-setup.js %>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
 <%- if Discourse.base_path.present? %>
 <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">
 <% end %>