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
2025-01-09 17:48:06
510浏览
收藏 0
回答 1
回答 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.
分享
微博
QQ
微信
回复
2025-01-09 19:55:45


相关问题
HarmonyOS 高度自适应
889浏览 • 1回复 待解决
HarmonyOS RichText自适应高度
582浏览 • 1回复 待解决
HarmonyOS webview自适应屏幕
648浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
1437浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
1064浏览 • 1回复 待解决
HarmonyOS RichText能否自适应高度
506浏览 • 1回复 待解决
HarmonyOS 高度自适应的问题
846浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
946浏览 • 1回复 待解决
HarmonyOS RelativeContainer自适应高度相关
614浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容的高度
948浏览 • 1回复 待解决
HarmonyOS List高度根据内容自适应
818浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
653浏览 • 1回复 待解决
HarmonyOS webview如何设置自适应
1281浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
1621浏览 • 1回复 待解决
HarmonyOS 自适应父组件高度问题
1674浏览 • 1回复 待解决
HarmonyOS web组件怎么自适应高度
573浏览 • 1回复 待解决
HarmonyOS Grid组件能否高度自适应
583浏览 • 1回复 待解决
WebView加载网页无法自适应
1064浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
1155浏览 • 1回复 待解决
HarmonyOS List是否可以设置自适应高度
473浏览 • 1回复 待解决
恭喜您,今日已阅读两篇内容,特奖励+2声望, 快来领取吧。