How do websites (like Google) render different stylesheets for 'mobile' devices?

Question

I'm trying to find out how to render different critical css or load different stylesheets based on the viewport/device. This might be a dublicate question, but everywhere I look, the given answer seems to bee "Use media queries". But this doesn't solve the issue i'm trying to fix.

My main issue is with performance and user metrics. I want to optimize the amout of css that's being loaded. Now i've noticed some sites don't scale up/down when changing the viewport size because they only load the css for the viewport size on load. (I've noticed that the 'mobile' stylesheets are loaded when using responsive inspector mode, which leads me to think it's not the viewport size but most likely the device type or something like that)

An example of this is used by Google. For example their doodles page loads mobilestyles.css when loaded in responsive mode and styles.css when loaded on regular size:

HTML head when loaded regular view

HTML head when loaded responsive view

This doesn't seem to be dynamically altered after load with javascript in any way. How does the served html change based on the device making the request and is it possible to use this to serve/render a different <style> tag for viewport specific critical css?

Maybe [this MDN article](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Viewport-Width) puts you in the right direction: there is a (deprecated) viewport-width directive available in the request header. Also check out [client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints). — Nicolas Goosen, Feb 28 '22 at 10:49
Thanks! I'm pretty sure this is exactly what i was looking for! — jgoessens, Mar 01 '22 at 09:30

score 1 · Answer 1 · answered Oct 07 '22 at 07:01

I believe you are talking about how sites like Instagram and YouTube make changes on their sites while still staying on the same device. Their style, though, after resizing for PC, doesn't look like the phone's one. You might want to try this; It has worked for me till now:

This will determine whether the device is mobile or PC.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check for Device and Change CSS</title>
    <script type="module">
        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        if (isMobile) {
            var head = document.getElementsByTagName('HEAD')[0];
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'style-for-mobile.css';
            head.appendChild(link);
        } else {
            var head = document.getElementsByTagName('HEAD')[0];
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'general-style.css';
            head.appendChild(link);
        }
    </script>
</head>
<body>
</body>
</html>

And, Then make two different files for CSS. One for mobile devices and then another for maybe desktop devices.

/*style-for-mobile.css*/
*{
    background-color: black;
}


/*general-style.css*/
*{
    background-color: blue;
}

Check these articles:

score 0 · Answer 2 · answered Feb 28 '22 at 10:49

Try this:

<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css" />

<link rel="stylesheet" media="screen and (max-width: 767px)" href="mobile.css" />

Also, it might be a smarter move to make mobile css inside the regular one, using media queries, so you can avoid sacrificing 1 http request that is being used by importing the second css. :)

An example of how you can style css for different devices inside the regular css:

/* min size style*/
@media screen and (max-width:320px) {
   /* put your css style in there */
}

/* middle size style */
@media screen and (min-width:321px) {
   /* put your css style in there */
}

/* large size style */
@media screen and (min-width:800px) {
   /* put your css style in there */
}

Thanks for your reply, but as mentioned in the post, i'm not looking for media queries. The problem isn't adding responsive styling, but rather how the browser knows what device to load css for before loading the html (like in the example). — jgoessens, Feb 28 '22 at 12:53

How do websites (like Google) render different stylesheets for 'mobile' devices?

2 Answers2