的宽度（以 CSS 像素为单位）

像素是指 CSS 中用于描述布局的单位。如果设备像素比 (DPR) 为 2，则 100 像素的 CSS 宽度将是 200 设备像素 (DP)。） Width这是以真实物理像素表示的图像的实际宽度（类似于w因响应式图像而闻名的描述符）。 Downlink这是客户端的最大下载速度。 Save-Data该布尔值指示是否应采取额外措施来减少有效负载。 Downlink尚未Save-Data在 Chrome 中提供，但您可以想象它们的用途。让我们重点关注当前可用的提示。首先，我们必须告诉浏览器发送提示。 在 HTML 中启用客户端提示  客户端提示流程： 1. 启用客户端提示。 2.增加客户端提示。 3. 服务器选择或生成图像。 4. 服务器响应。 5. 渲染图像。 添加“<meta>”标签后，客户端提示将启用，并且附加的  标头将。


随请求一起发送。 您必须选择启用客户端提示。这样做的原因是附加数据不应该添加到请求中，除非它用于某些用途。如果不使用它，则将数据添加到有效负载中就会违背其目的。Web 服务器还可以通过在 HTML 响应中添加  标头来宣传其支持，其中列出了服务器接 购买电话号码列表 受的提示： Accept-CH: DPR Width Viewport-Width 复制 如果无法添加  标头，您还可以&lthead&gt在标记的元素内添加此元标记： <meta -equiv="Accept-CH" content="DPRWidthViewport-Width"> 复制 这就是我们所需要的。浏览器现在会将DPRWidth和Viewport-Width标头附加到从 HTML 生成的所有Width后续请求，包括 CSS、JavaScript 等（实际上， 除外，它仅适用于图像）。 除了图像之外，如果 CSS 文件包含基于视口大小或设。





备像素比的断点，则客户端提示可能会很有用。在 CSS 返回到浏览器之前知道视口大小，服务器可以在发送响应之前从 CSS 文件中去除不合格的块。那是另一个故事了。现在，让我们看一个带有图像的示例。 我们的老朋友，<img>  想象一下我们有一个带有下面图像标签的页面。让我们flower.jpg以 200 CSS 像素的宽度显示图像。 <img src="flower.jpg" width="200"> 复制 启用客户端提示后，浏览器将向服务器发送以下请求：  标头列表 只需添加元标记，浏览器就会将“DPR”和“Viewport-Width”附加到请求中。 浏览器向服务器“提示”请求设备的像素比为 2。作为奖励，我们还获得了视口的大小，因为浏览器在发出请求时就知道了这一点。由于 DPR 为 2，并且我们的页面设计需。