Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to set options to get mobile CSS only? #453

Open
usabe opened this issue Apr 23, 2021 · 1 comment
Open

how to set options to get mobile CSS only? #453

usabe opened this issue Apr 23, 2021 · 1 comment

Comments

@usabe
Copy link

usabe commented Apr 23, 2021

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
Copy link

pojith commented Feb 28, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants