网站（如 Google）如何为“移动”设备呈现不同的样式表？答案

【问题标题】：How do websites (like Google) render different stylesheets for 'mobile' devices?网站（如 Google）如何为“移动”设备呈现不同的样式表？
【发布时间】：2022-10-07 15:01:41
【问题描述】：

我试图找出如何根据视口/设备呈现不同的关键 css 或加载不同的样式表。这可能是一个重复的问题，但无论我看哪里，给定的答案似乎都是“使用媒体查询”。但这并不能解决我试图解决的问题。

我的主要问题是性能和用户指标。我想优化正在加载的 css 数量。现在我注意到一些站点在更改视口大小时不会按比例放大/缩小，因为它们只在加载时加载视口大小的 css。（我注意到在使用响应式检查器模式时会加载“移动”样式表，这让我认为这不是视口大小，而很可能是设备类型或类似的东西）

谷歌使用了一个例子。例如，它们的 doodles page 在以响应模式加载时加载 mobilestyles.css，在以常规尺寸加载时加载 styles.css：

HTML head when loaded regular view

HTML head when loaded responsive view

在以任何方式加载 javascript 后，这似乎不会被动态更改。提供的 html 如何根据发出请求的设备进行更改，是否可以使用它为视口特定的关键 css 提供/呈现不同的<style> 标记？

也许this MDN article 让您朝着正确的方向前进：请求标头中有一个（已弃用的）视口宽度指令。另请查看client hints。
谢谢！我很确定这正是我想要的！

标签： html css responsive web-frontend

【解决方案1】：

尝试这个：

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

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

此外，使用媒体查询在常规 CSS 中制作移动 CSS 可能是一种更明智的举措，因此您可以避免通过导入第二个 CSS 来牺牲 1 个正在使用的 http 请求。 :)

如何在常规 css 中为不同设备设置 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 */
}

【讨论】：

感谢您的回复，但正如帖子中所述，我不是在寻找媒体查询。问题不在于添加响应式样式，而是浏览器如何在加载 html 之前知道要为哪个设备加载 css（如示例中所示）。

【解决方案2】：

我相信您在谈论 Instagram 和 YouTube 等网站如何在其网站上进行更改，同时仍保持在同一设备上。不过，在为 PC 调整大小后，他们的风格看起来不像手机的风格。你可能想试试这个；到目前为止它对我有用：

这将确定设备是移动设备还是 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>

然后，为 CSS 制作两个不同的文件。一个用于移动设备，另一个用于桌面设备。

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


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

检查这些文章：

【讨论】：