We are in the process of creating a collaborative open-source web application for art educators worldwide. Our goal is to have a visually appealing website that automatically adjusts based on the width of the browser, similar to top websites like google.org and barackobama.com.
While we can identify the browser and operating system being used, we prefer not to utilize this information. Instead, we plan to implement four or five distinct stylesheets that will be activated depending on the browser's width adjustments.
For instance, when accessing the app from a DESKTOP computer, users will see the full version when the browser is maximized. As the browser window size decreases, the site layout will adapt dynamically to ensure compatibility across all devices.
Our approach involves ensuring that CSS modifications are solely triggered by real-time changes in viewport width, rather than pre-defined device categories such as "mobile," "tablet," or "desktop."
In an interesting twist, we are using Google Apps Script to host our web app, which appears to remove any meta viewport tags traditionally used for responsiveness.
Is there a way for us to incorporate multiple stylesheets that respond to varying browser widths without relying on device types?