HarmonyOS 鸿蒙Next webview 渲染的字体大小不一

发布于 1周前 作者 yibo5220 最后一次编辑是 5天前 来自 鸿蒙OS

Demo里有两段文字，点击按钮能切换，外层统一用的 font-size: 16px !important强行限制字体大小，但是两段文字渲染的大小不一致，没排查到文字在哪，是文字编码格式的问题吗?

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  webcontroller: webview.WebviewController = new webview.WebviewController();
  source: string = '<p>中国人民银行授权中国外汇交易中心公布，2024年9月10日银行间外汇市场人民币汇率中间价为1美元对人民币7.1136元，1欧元对人民币7.8498元，100日元对人民币4.9661元，1港元对人民币0.91234元，1英镑对人民币9.2986元，1澳大利亚元对人民币4.7384元，1新西兰元对人民币4.3706元，1新加坡元对人民币5.4473元，1瑞士法郎对人民币8.3748元，1加拿大元对人民币5.2462元，人民币1元对1.1295澳门元，人民币1元对0.61428林吉特，人民币1元对12.7277俄罗斯卢布，人民币1元对2.5126南非兰特，人民币1元对188.71韩元，人民币1元对0.51628阿联酋迪拉姆，人民币1元对0.52757沙特里亚尔，人民币1元对50.5371匈牙利福林，人民币1元对0.54454波兰兹罗提，人民币1元对0.9503丹麦克朗，人民币1元对1.4587瑞典克朗，人民币1元对1.5231挪威克朗，人民币1元对4.79113土耳其里拉，人民币1元对2.7956墨西哥比索，人民币1元对4.7638泰铢。</p>'
  source2: string = '<p>有消息称，COMEX市场<a href="" target="_blank">铜库存</a>变动情况如下（单位：短吨）</p>'
  @State @Watch('loadData') news: string = this.source
  @Prop @Watch('loadData') fontSize: number = 16

  aboutToAppear(): void {
    setTimeout(() => {
      this.loadData()
    }, 0)
  }

  loadData() {
    try {
      // 点击按钮时，通过loadData，加载HTML格式的文本数据
      let html = `<html><body style="font-size:${this.fontSize}px !important;padding: 0;line-height: 88px" bgcolor='white'>${this.news}</body></html>`
      console.log('loadData', html);
      this.webcontroller.loadData(html, "text/html", "UTF-8");
    } catch (error) {
      let e: BusinessError = error as BusinessError;
      console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
    }
  }

  build() {
    Column() {
      Web({ src: '', controller: this.webcontroller })
        .width('100%')
        .height('80%')

      Button('switch source')
        .onClick(() => {
          if(this.news === this.source) {
            this.news = this.source2
          } else {
            this.news = this.source
          }
        })
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next webview 渲染的字体大小不一的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

加上一个meta标签即可，请参考

 let html = `<html><head> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"></head><body style="font-size:${this.fontSize}px !important;padding: 0;line-height: 88px" bgcolor='white'>${this.news}</body></html>`<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

若html中的富文本中带有注入#等特殊字符，建议将baseUrl和historyUrl两个参数的值设置为"空格"。
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#loaddata

更多关于HarmonyOS 鸿蒙Next webview 渲染的字体大小不一的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next webview 渲染的字体大小不一的问题，通常与webview的字体设置、CSS样式以及系统字体缩放设置有关。

  1. 检查CSS样式：首先确认webview加载的网页中CSS字体设置是否一致。可能存在不同元素或类使用了不同的字体大小设置，导致渲染结果中字体大小不一。

  2. 系统字体缩放：鸿蒙系统可能允许用户调整系统字体大小，这会影响webview中的字体渲染。检查系统设置，确认字体缩放比例是否统一，或者网页是否对系统字体缩放做了适配。

  3. webview配置：检查webview的配置项，确认是否有关于字体渲染的特殊设置。例如，某些webview配置可能允许开发者指定字体缩放比例或默认字体。

  4. 网页内容：确认网页内容本身是否包含动态调整字体大小的脚本或逻辑，这可能导致字体大小在加载或交互过程中发生变化。

  5. 版本兼容性：检查当前使用的HarmonyOS版本与webview组件的兼容性。有时，系统更新或webview组件的更新可能引入新的渲染行为或修复旧问题。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部