HarmonyOS webview高度不能自适应

scroller 或者list 嵌套webview 的时候 webview高度不能自适应

下面的代码是我的webview设置

Web({ src: this.webUrl, controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
  .nestedScroll({
    scrollForward: NestedScrollMode.SELF_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  })
  .domStorageAccess(true)
  .mixedMode(MixedMode.All)
  .height('100%')
  .width('100%')
  .layoutMode(WebLayoutMode.FIT_CONTENT)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

HarmonyOS

put_get

2025-01-09 17:48:06

241浏览

回答 1

按赞同

按时间

Excelsior_abit

目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局，高度自适应需设置web组件属性.layoutMode(WebLayoutMode.FIT_CONTENT)，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

选择WebLayoutMode.FIT_CONTENT时，如果网页内容宽或长度超过8000px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式。

页面自适应可使用.layoutMode(WebLayoutMode.FIT_CONTENT)属性，web组件options的RenderMode参数设置为RenderMode.SYNC_RENDER，在controller绑定成功的回调.onControllerAttached中操作controller

demo：

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

@Entry
@Component
struct Index {
  webContent: string =
    "<p>三月</p><p><img src=\xxxx\" title=\"xxx\" alt=\"xxx\"/></p>"
  webContent2: string =
    `<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"><meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/><meta content="no-cache,must-revalidate" http-equiv="Cache-Control"/><meta content="no-cache" http-equiv="pragma"/><meta content="0" http-equiv="expires"/><meta content="telephone=no, address=no" name="format-detection"/><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><style type="text/css">body{max-width: 100%;padding:0; margin:0;font-size: 16px; color:#333; line-height:24px;}p{margin-top:5px;margin-bottom:5px;}a{color:blue;}img{max-width: 100%;}</style></head><body><p>今天吃什么，晒出你的午餐吧！！！</p></body></html>`
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: '', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
        .layoutMode(WebLayoutMode.FIT_CONTENT)
        .onControllerAttached(() => {
          this.controller.loadData(this.webContent, "text/html", "UTF-8", 'xxx')
        })
    }.backgroundColor(Color.Blue).height('100%').width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

2025-01-09 19:55:45

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS webview高度不能自适应

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