HarmonyOS web控件加载富文本，字太小

一屏加载字号太小根本看不清。

设置 .initialScale(100)之后虽然放大了但是一屏展示不了还要滑动才能看完。

怎么能让文字自适应屏幕大小?

富文本：

<p><span style="color: rgb(68, 68, 68); line-height: 1.75;"> 该情况是由于2018年开展产业工人大调查，可能存在基层工会或街道工会提前将信息批量录入的情况，可以点击【设置】-【安全设置】-【注销账号】，将此账号注销（身份证信息注销），使用新手机号，获取验证码登陆后完成实名认证。  
</span></p><p><br></p>  
  <p><span style="color: rgb(68, 68, 68); line-height: 1.75;"> 注：实名认证时候提示该身份证信息与xxx手机号绑定，请使用原本绑定手机号登录，如果原手机号不在使用，请使用登录页面“旧手机不在使用”功能通过人脸识别重置你的手机号。</span></p>1.
2.
3.

demo：

import { router } from '@kit.ArkUI'  
import TitleBar from '../../components/TitleBar'  
import { FaqDetailEntity } from '../../entity/SettingResponse'  
import { Api } from '../../utils/network/Api'  
import { RequestPath } from '../../utils/network/RequestPath'  
import WebView from '@ohos.web.webview';  
@Entry  
@Component  
struct FaqDetailPage {  
  @State title:string = ""  
  @State dataId:string = ""  
  private webController: WebView.WebviewController = new WebView.WebviewController()  
  
  build() {  
    Column(){  
      TitleBar({ title: this.title ,type:"white"})  
  
      Web({ src: "", controller: this.webController })  
        .width('100%')  
        .javaScriptAccess(true)  
        .initialScale(100)  
        .cacheMode(CacheMode.None)  
        .height('100%')  
  
  
    }.width('100%')  
    .height('100%')  
  
  }  
  
  aboutToAppear(): void {  
    let data = router.getParams() as Record<string, string>  
    this.title = data.title  
    this.dataId = data.dataId  
  
    Api.getInstance().get<FaqDetailEntity>(RequestPath.API_HOME_FAQ_SHOW_GET+this.dataId).then(data=>{  
      this.webController.loadData(data.data.content, "text/html", "utf-8", "", "")  
      this.webController.refresh()  
    })  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

HarmonyOS

Heiang

2024-10-28 10:12:14

1553浏览

回答 1

按赞同

按时间

put_get

关于富文本操作建议使用RichText实现，以下为简单demo，设置H5对应标签的字体大小即可按照预期展示：

@Entry  
@Component  
struct PageRichText {  
  //font-size: 80px;  
  @State data2:string = '<p><span style="font-size: 80px;color: rgb(68, 68, 68); line-height: 1.75;">该情况是由于2018年开展产业工人大调查，可能存在基层工会或街道工会提前将信息批量录入的情况，可以点击【设置】-【安全设置】-【注销账号】，将此账号注销（身份证信息注销），使用新手机号，获取验证码登陆后完成实名认证。</span></p><p><br></p><p><span style="color: rgb(68, 68, 68); line-height: 1.75;">注：实名认证时候提示该身份证信息与xxx手机号绑定，请使用原本绑定手机号登录，如果原手机号不在使用，请使用登录页面“旧手机不在使用”功能通过人脸识别重置你的手机号。</span></p>'  
  build() {  
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,  
      justifyContent: FlexAlign.Center }) {  
      RichText(this.data2)  
        .width("100%")  
        .height("50%")  
        .backgroundColor(0XBDDB69)  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

以下为HarmonyOSRichText富文本组件API链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richtext-V5

<font size="7"> + this.data2 + </font>'1.

目前使用富文本还是可以的，在你的富文本之外增加font标签，设置size属性即可改变大小，目前仅支持 1-7 ，7为最大。

富文本还有其他属性支持，可参考上述API链接。

2024-10-28 15:59:29

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web控件加载富文本，字太小

订阅鸿蒙技术特刊，精选内容抢先看