Proof of concept: viewport-based mobile mode

app/assets/javascripts/discourse/app/models/site.js

@@ -79,6 +79,7 @@ export default class Site extends RestModel {
   }
 
   @service siteSettings;
+  @service capabilities;
 
   @tracked categories;
 
@@ -95,6 +96,22 @@ export default class Site extends RestModel {
     this.categories = this.categories || [];
   }
 
+  get desktopView() {
+    return !this.mobileView;
+  }
+
+  set desktopView(value) {
+    // Ignore server value
+  }
+
+  get mobileView() {
+    return this.capabilities.viewportWidth <= 450;
+  }
+
+  set mobileView(value) {
+    // Ignore server value
+  }
+
   get useGlimmerTopicList() {
     if (this.#glimmerTopicDecision !== undefined) {
       // Caches the decision after the first call, and avoids re-printing the same message

app/assets/javascripts/discourse/app/services/capabilities.js

@@ -1,9 +1,13 @@
+import { tracked } from "@glimmer/tracking";
+
 const APPLE_NAVIGATOR_PLATFORMS = /iPhone|iPod|iPad|Macintosh|MacIntel/;
 const APPLE_USER_AGENT_DATA_PLATFORM = /macOS/;
 
 const ua = navigator.userAgent;
 
 class Capabilities {
+  @tracked viewportWidth;
+
   touch = navigator.maxTouchPoints > 1 || "ontouchstart" in window;
 
   isAndroid = ua.includes("Android");
@@ -46,6 +50,15 @@ class Capabilities {
     window.location.search.includes("discourse_app=1");
   isAppWebview = window.ReactNativeWebView !== undefined;
 
+  constructor() {
+    this.viewportWidth = window.innerWidth;
+    window.addEventListener("resize", () => {
+      if (window.innerWidth !== this.viewportWidth) {
+        this.viewportWidth = window.innerWidth;
+      }
+    });
+  }
+
   get userHasBeenActive() {
     return (
       !("userActivation" in navigator) || navigator.userActivation.hasBeenActive

app/helpers/application_helper.rb

@@ -627,7 +627,11 @@ module ApplicationHelper
         stylesheet_manager
       end
 
-    manager.stylesheet_link_tag(name, "all", self.method(:add_resource_preload_list))
+    manager.stylesheet_link_tag(
+      name,
+      opts[:media] || "all",
+      self.method(:add_resource_preload_list),
+    )
   end
 
   def discourse_preload_color_scheme_stylesheets

app/views/common/_discourse_stylesheet.html.erb

@@ -3,7 +3,8 @@
 <%- if rtl? %>
   <%= discourse_stylesheet_link_tag(mobile_view? ? :mobile_rtl : :desktop_rtl) %>
 <%- else %>
-  <%= discourse_stylesheet_link_tag(mobile_view? ? :mobile : :desktop) %>
+  <%= discourse_stylesheet_link_tag(:mobile, { media: "all and (max-width: 450px)" }) %>
+  <%= discourse_stylesheet_link_tag(:desktop, { media: "all and (min-width: 450px)" }) %>
 <%- end %>
 
 <%- if staff? %>