how to set options to get mobile CSS only?

[usabe]

Hi, team,

I am trying to use UnCSS to generate mobile version CSS for a page. How could I achieve this?

I tried setting the userAgent to "mobile" or "Android" or "iPhone" or other strings from mobile devices, also tried setting with the "media" options with value such as "(max-width: 767px)" etc, but the results I got are always the same as the desktop version CSS.

Could you please give some hints or directions on how to achieve this?

Thanks,
Abe

[pojith]

If you want to generate separate CSS files for desktop and mobile without using media queries, you can use different tools or methodologies. Here are a few approaches:

1. Use Separate Stylesheets:
   Create two separate CSS files, one for desktop styles and one for mobile styles. Link the appropriate stylesheet in your HTML based on the user's device or other conditions.

   <!-- Desktop styles -->
   <link rel="stylesheet" type="text/css" href="styles-desktop.css" />
   
   <!-- Mobile styles -->
   <link rel="stylesheet" type="text/css" href="styles-mobile.css" />

   You can conditionally load these styles based on user agent detection or other criteria on the server side or using JavaScript.

2. Conditional Loading with JavaScript:
   Use JavaScript to conditionally load the appropriate stylesheet based on the viewport width or other conditions.

   <script>
       if (window.innerWidth <= 767) {
           var link = document.createElement("link");
           link.href = "styles-mobile.css";
           link.type = "text/css";
           link.rel = "stylesheet";
           document.head.appendChild(link);
       } else {
           var link = document.createElement("link");
           link.href = "styles-desktop.css";
           link.type = "text/css";
           link.rel = "stylesheet";
           document.head.appendChild(link);
       }
   </script>

   This script dynamically adds a link to the appropriate stylesheet based on the viewport width.

3. Server-Side Detection:
   Use server-side logic to determine the user's device or other conditions and serve the appropriate CSS file accordingly. This might involve user agent detection on the server side.

   The specific implementation would depend on your server-side technology (Node.js, PHP, Python, etc.).

These approaches allow you to serve different CSS files based on specific conditions without relying on media queries in the CSS itself. Keep in mind that user agent detection has its limitations and may not always accurately reflect the user's device characteristics.