Is there a way to configure firebase.json file to serve different html files based on screen size?

Viewed 125

I have a website configured through Firebase Hosting. I'm using adaptive web design technique to serve a different html file for desktop vs. mobile devices. Essentially, I have two different html files, that are responsive, but I wanted to serve one on desktop and one on mobile. Is there a way to configure the firebase.json file to do this? Right now, I just have my website serving the index.html file, which is the desktop version. To get to the mobile version, I must add the "mobile.html" at the end of the url.

Here's my json file currently.

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
1 Answers

Firebase Hosting doesn't provide a way to detect the type or size of mobile device for the purpose of serving content.

True responsive design is implemented as one set of HTML and CSS that renders correctly for any size and orientation of screen. I strongly suggest that you look into how to implement that correctly (hint: use screen size media rules in CSS) rather than depending on the device identifying its capabilities through an HTTP request. I'm sure you can find lots of great tutorials and examples of that using a web search.

Related