User-Agent开发指导
说明:
当前为Beta阶段。
User-Agent(简称UA)是一个特殊的字符串,包含设备类型、操作系统及其版本等关键信息。在Web开发中,这个字符串使服务器能够识别请求的来源设备及其特性,从而据此提供定制化的内容和服务。如果页面无法正确识别UA,可能会导致多种异常情况。例如,为移动设备优化的页面布局可能会在桌面设备上显示错乱,反之亦然。此外,某些浏览器功能或CSS样式可能仅在特定浏览器版本中受支持,如果页面无法根据UA字符串作出正确判断,就可能出现渲染问题或逻辑错误。
默认User-Agent结构
-
默认User-Agent定义
Mozilla/5.0 ({DeviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/{ChromeCompatibleVersion}.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {DeviceCompat} {扩展区} -
举例说明
Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile -
字段说明
字段 含义 DeviceType 当前的设备类型。
取值范围:
- Phone:手机
- Tablet:平板设备OSName 基础操作系统名称。
默认取值:OpenHarmonyOSVersion 基础操作系统版本,两位数字,M.S。
通过系统参数const.ohos.fullname解析版本号,取版本号中M.S的前两位。
默认取值:例如5.0ChromeCompatibleVersion 兼容Chrome主版本的版本号,从114版本开始演进。
默认取值:114ArkWeb OpenHarmony版本Web内核名称。
默认取值:ArkWebArkWeb VersionCode ArkWeb版本号,格式a.b.c.d。
默认取值:例如4.1.6.1DeviceCompat 前向兼容字段。
默认取值:Mobile扩展区 三方应用可以扩展的字段。
三方应用使用ArkWeb组件时,可以做UA扩展,例如加入APP相关信息标识。
说明:
- 当前默认User-Agent的ArkWeb字段前有两个空格。
- 当前通过User-Agent中是否含有"Mobile"字段来判断是否开启前端HTML页面中meta标签的viewport属性。当User-Agent中不含有"Mobile"字段时,meta标签中viewport属性默认关闭。
- 建议通过OpenHarmony关键字识别是否为OpenHarmony设备,同时通过DeviceType识别设备类型,以适配不同设备的页面显示(ArkWeb关键字表示设备使用的Web内核,OpenHarmony关键字表示设备使用的操作系统,因此推荐通过OpenHarmony关键字识别是否为OpenHarmony设备)。
自定义User-Agent结构
在下面的示例中,接口提供的默认User-Agent信息为开发者提供基础,使其能够在此基础上进行定制或扩展。
// index.cj
import kit.PerformanceAnalysisKit.Hilog
import kit.ArkWeb.WebviewController
import kit.ArkUI.Web
import ohos.business_exception.*
func loggerInfo(str: String) {
Hilog.info(0, "CangjieTest", str)
}
func loggerError(str: String) {
Hilog.error(0, "CangjieTest", str)
}
@Entry
@Component
class EntryView {
let webController = WebviewController()
func build() {
Column {
Button("getUserAgent").onClick ({ evt =>
try {
let userAgent = webController.getUserAgent()
loggerInfo("userAgent: ${userAgent}")
} catch (e: BusinessException) {
loggerError("getUserAgent ErrorCode: ${e.code}, Message: ${e.message}")
}
})
Web(src: 'www.example.com', controller: webController)
}
}
}
相关User-Agent接口优先级
| 接口名称 | 优先级 | 说明 |
|---|---|---|
| setCustomUserAgent | 最高 | 对调用的Web组件生效。 |
| ArkWeb默认UA | 最低 | 对应用中所有Web组件生效,只读,通过getDefaultUserAgent获取。 |
常见问题
如何通过User-Agent来识别OpenHarmony操作系统中不同设备
OpenHarmony设备的识别主要通过User-Agent中的系统、系统版本和设备类型三个维度来判断。建议同时检查系统、系统版本和设备类型,以确保更准确的设备识别。
-
系统识别
通过User-Agent中的{OSName}字段识别OpenHarmony系统。
const isOpenHarmony = () => /OpenHarmony/i.test(navigator.userAgent); -
系统版本识别
通过User-Agent中的{OSName}和{OSVersion}字段识别OpenHarmony系统及系统版本。格式为:OpenHarmony + 版本号。
const matches = navigator.userAgent.match(/OpenHarmony (\d+\.?\d*)/); matches?.length && Number(matches[1]) >= 5; -
设备类型识别
通过deviceType字段来识别不同设备类型。
// 检测是否为手机设备 const isPhone = () => /Phone/i.test(navigator.userAgent); // 检测是否为平板设备 const isTablet = () => /Tablet/i.test(navigator.userAgent);
如何模拟OpenHarmony操作系统的User-Agent进行前端调试
在Windows/Mac/Linux等操作系统中,可以通过Chrome/Edge/Firefox等浏览器DevTools提供的User-Agent复写能力,模拟OpenHarmony User-Agent。