移动体验 / 方法解读

移动端请求 Sec-CH-UA-Mobile 头部判断设备类型

服务器可以通过 Sec-CH-UA-Mobile 头部获取客户端是否运行在移动设备上的布尔值,从而决定是否返回移动端专用样式表。

办公桌上摆放着现代智能手机,屏幕显示界面设计模板的3D矢量插图
主题资料配图,非新闻现场照片 · 配图:modern mobile phone with interface on a desk in office 3d

检查响应头是否包含 Accept-CH 指令

服务器在首次响应中应包含 Accept-CH 头部,列出希望客户端在后续请求中发送的客户端提示信息。例如,Accept-CH: Sec-CH-UA-Mobile 表示服务器希望获取移动设备标识。检查时需确认该头部是否出现在初始 HTML 响应中,且内容包含 Sec-CH-UA-Mobile。如果响应中未包含此头部,客户端将不会在后续请求中发送该信息。

如果服务器未在响应中声明 Accept-CH,浏览器将不会发送 Sec-CH-UA-Mobile 头部。此时服务器无法通过该头部区分设备类型。可以通过抓包工具查看初始响应的头部列表,确认是否存在 Accept-CH。若缺失,需修改服务器配置以添加该头部,并确保其值为 Sec-CH-UA-Mobile。

验证后续请求是否携带 Sec-CH-UA-Mobile 头部

在浏览器发起后续请求时,检查请求头部是否包含 Sec-CH-UA-Mobile。该头部是一个布尔值,?1 表示运行在移动设备上,?0 表示非移动设备。例如,Sec-CH-UA-Mobile: ?1 表示当前请求来自手机。验证时需对比初始请求和后续请求的头部差异,确认该值是否正确传递。

如果后续请求中未出现 Sec-CH-UA-Mobile 头部,可能是浏览器未遵循 Accept-CH 指令或权限策略限制。检查浏览器的开发者工具网络面板,查看请求头部列表。若头部缺失,需确认服务器是否正确声明了 Accept-CH,且客户端权限允许发送该信息。

根据头部值调整返回的资源或样式

服务器根据 Sec-CH-UA-Mobile 的值决定返回的资源。当值为 ?1 时,可返回移动端专用 CSS 文件或精简版 HTML。当值为 ?0 时,返回桌面端资源。例如,服务器可配置逻辑:if (header == '?1') return 'mobile.css' else return 'desktop.css'。验证时需检查返回的资源是否符合预期,确保移动端页面加载了正确的样式。

若服务器未根据该头部调整资源,可能导致移动端页面显示异常。检查服务器日志或响应内容,确认是否根据头部值切换了资源。若未切换,需修改服务器逻辑,使其在接收到 ?1 时返回移动端资源,在接收到 ?0 时返回桌面端资源。

确认 Vary 头部是否包含 Sec-CH-UA-Mobile

服务器应在响应的 Vary 头部中包含 Sec-CH-UA-Mobile,以确保浏览器为不同的设备值缓存独立的资源。例如,Vary: Sec-CH-UA-Mobile。检查时需查看响应头部的 Vary 字段,确认是否包含该头部。若未包含,浏览器可能会缓存所有设备类型的同一资源,导致移动端和桌面端显示不一致。

如果 Vary 头部未包含 Sec-CH-UA-Mobile,需修改服务器配置,在响应中添加该头部。例如,设置 Vary: Sec-CH-UA-Mobile。验证时需检查缓存行为,确保不同设备值返回的资源被正确缓存和区分。若未生效,需清除浏览器缓存并重新测试。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. HTTP Client hints - HTTP | MDN ↗
  2. 配图:modern mobile phone with interface on a desk in office 3d ↗
← 更多移动体验文章返回顶部 ↑