HarmonyOS鸿蒙Next中web的自适应高度无效，该怎么设置？

HarmonyOS鸿蒙Next中web的自适应高度无效，该怎么设置？ 当前web一直无法自适应高度，怎么解决？

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

@Entry
@Component
struct Index {
  private webviewController: WebviewController = new webview.WebviewController()
  private scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    setTimeout(() => {
      this.webviewController.loadData("<ol><li style=\"text-align: start;\">设备无法启动或频繁重启原因：电源线断裂、电压不稳、功率不足（如线径过细导致压降过大）1611。解决方案：检查电源线连接是否牢固，更换损坏的电源适配器或线路111。使用万用表测量输入电压，确保符合设备要求（如12V/2A）11。若为集中供电，需检查供电系统是否超负荷，必要时更换大功率电源或增加独立供电模块49。</li><li style=\"text-align: start;\">红外摄像头夜间无图像原因：夜间红外灯启动后电流需求增加，超出电源或PoE交换机的负载能力910。解决方案：更换支持更高功率的PoE+交换机或独立电源，并预留20%的功率冗余910。</li></ol>", 'text/html', 'UTF-8')
    }, 2000)
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Bug:Web自适应高度无效")
        Text("顶部文字显示").fontSize(15)
        Blank(30)
        Web({ src: "", controller: this.webviewController, renderMode: RenderMode.SYNC_RENDER })
          .layoutMode(WebLayoutMode.FIT_CONTENT) // 设置为Web组件大小自适应页面内容
          .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态
          .backgroundColor("#f89f0f")
        Blank(30)
        Text("底部文字显示").fontSize(15)
      }
    }
  }
}

cke_3164.png


更多关于HarmonyOS鸿蒙Next中web的自适应高度无效，该怎么设置？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

【解决方案】

需设置viewport使移动端布局自适应不同屏幕尺寸，在前端网页加上如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1" />

同时设置Web属性metaViewport(true)让viewport配置生效。

加载文字场景，需主动设置<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">避免文本字体大小不一致。

可参考loadData文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#loaddata

也可参考Web组件大小自适应页面内容布局：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-fit-content

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

@Entry
@Component
struct Index {
  private webviewController: WebviewController = new webview.WebviewController()
  private scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    setTimeout(() => {
      this.webviewController.loadData(`
     <!DOCTYPE html>
        <html>
        <head>
          <meta name="viewport" content="width=device-width,initial-scale=1">
          <style>body { font-size: 14px; }</style>
        </head>
        <body>
        <ol><li style=\"text-align: start;\">设备无法启动或频繁重启原因：电源线断裂、电压不稳、功率不足（如线径过细导致压降过大）1611。解决方案：检查电源线连接是否牢固，更换损坏的电源适配器或线路111。使用万用表测量输入电压，确保符合设备要求（如12V/2A）11。若为集中供电，需检查供电系统是否超负荷，必要时更换大功率电源或增加独立供电模块49。</li><li style=\"text-align: start;\">红外摄像头夜间无图像原因：夜间红外灯启动后电流需求增加，超出电源或PoE交换机的负载能力910。解决方案：更换支持更高功率的PoE+交换机或独立电源，并预留20%的功率冗余910。</li></ol>
        </body>
        </html>
        `, 'text/html', 'UTF-8')
    }, 2000)
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Bug:Web自适应高度无效")
        Text("顶部文字显示").fontSize(15)
        Blank(30)
        Web({ src: "", controller: this.webviewController, renderMode: RenderMode.SYNC_RENDER })
          .layoutMode(WebLayoutMode.FIT_CONTENT) // 设置为Web组件大小自适应页面内容
          .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态
          .backgroundColor("#f89f0f")
          .metaViewport(true)
        Blank(30)
        Text("底部文字显示").fontSize(15)
      }
    }
  }
}

cke_840.png

更多关于HarmonyOS鸿蒙Next中web的自适应高度无效，该怎么设置？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件自适应高度问题可通过设置layoutWeight属性为1解决，使其在容器内自动填充剩余空间。同时，确保Web组件的父容器高度明确，例如使用百分比或固定值。避免嵌套滚动视图，防止高度计算冲突。检查Web内容是否包含动态加载元素，必要时使用onPageEnd事件监听页面加载完成后再调整布局。

在HarmonyOS Next中，Web组件自适应高度问题通常与布局模式和渲染方式相关。从你的代码看，虽然设置了FIT_CONTENT布局模式，但Web组件在加载动态内容时可能无法正确计算高度。

建议检查以下几点：

  1. 确保Web内容加载完成后触发高度更新
this.webviewController.onPageEnd((event) => {
  // 页面加载完成后可能需要手动触发布局更新
})
  1. 尝试使用异步渲染模式
Web({
  controller: this.webviewController,
  renderMode: RenderMode.ASYNC_RENDER  // 改为异步渲染
})
  1. 为Web组件明确设置高度约束
Web({...})
  .layoutMode(WebLayoutMode.FIT_CONTENT)
  .height('100%')  // 或具体数值
  1. 检查父容器Scroll和Column的布局约束，确保它们允许内容自适应。

当前代码中使用了SYNC_RENDER同步渲染模式，在某些情况下可能影响高度计算。切换到ASYNC_RENDER通常能更好地处理动态内容的高度自适应。

回到顶部