【HarmonyOS NEXT】同一个Web页面在真机和模拟器上的显示比例差距大

最新推荐文章于 2024-07-06 00:15:21 发布

Mayism123

最新推荐文章于 2024-07-06 00:15:21 发布

阅读量330

点赞数 5

文章标签： harmonyos

本文链接：https://blog.csdn.net/Mayism123/article/details/136943157

版权

【关键字】

API 11 / Web组件 / 真机 / 显示大小 / 显示比例 / UserAgent

【问题描述】

设置了UserAgent后，同一个Web页面在真机和模拟器上的显示比例差距很大，在真机上显示的字号小很多。真机显示如下图所示。

【解决方案】

升级到API 11后，真机上Web组件的默认UserAgent变更为如下格式：

Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}

网站需要增加对鸿蒙Web的UA适配，即在H5网站中通过ArkWeb关键字识别是否是OpenHarmony设备以及web内核是否为ArkWeb，进行移动端的屏幕和布局适配。

参考文档：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/web/web-default-userAgent.md
上述deviceType、OSName、OSVersion、ArkWeb VersionCode等字段可通过WebviewController的getCustomUserAgent参数获取，通过Web组件的javaScriptProxy属性将该对象注入到H5页面，在H5页面通过关键字进行相应屏幕和布局的适配，示例如下：
- Page.ets

import web_webview from '@ohos.web.webview'
class WebParam {
userAgent: string = '';
constructor() {
}
getUseAgent(): string {
return this.userAgent;
}
setUseAgent(userAgent: string) {
this.userAgent = userAgent;
}
}
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State webParam: WebParam = new WebParam();

build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.onControllerAttached(() => {
let userAgent = this.controller.getCustomUserAgent();
this.webParam.setUseAgent(userAgent)
})
.javaScriptProxy({
object: this.webParam,
name: "webParam",
methodList: ["getUseAgent"],
controller: this.controller
})
}.height('100%')
}
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>我是一个html</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<meta name="referrer" content="no-referrer">
</head>

<body>
<div style="margin-bottom: 50px; text-align: center;"><span>我是一个html页面</span></div>
<div style="display: flex; flex-direction: column; align-items: center;">
<div><span id="result"></span></div>
</div>
</body>
<script>
window.onload = function() {
const btnGetDeviceInfo = document.getElementById('getDeviceInfo')
const resultTxt = document.getElementById('result')
resultTxt.innerText = webParam.getUseAgent()
}
</script>
</html>

Mayism123

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【HarmonyOS NEXT】同一个Web页面在真机和模拟器上的显示比例差距大

网站需要增加对鸿蒙Web的UA适配，即在H5网站中通过ArkWeb关键字识别是否是OpenHarmony设备以及web内核是否为ArkWeb，进行移动端的屏幕和布局适配。设置了UserAgent后，同一个Web页面在真机和模拟器上的显示比例差距很大，在真机上显示的字号小很多。真机显示如下图所示。API 11 / Web组件 / 真机 / 显示大小 / 显示比例 / UserAgent。
复制链接

扫一扫