HarmonyOS 鸿蒙Next中Web组件后加载出来显示布局不对了

HarmonyOS 鸿蒙Next中Web组件后加载出来显示布局不对了 在使用Web组件遇到一个问题，正常显示应该是左边浏览器中的样子，但是放到Web组件中后加载出来显示布局不对了

cke_2918.png

Web组件使用代码：

Web({ src:"https://www.jingback.com/tiandimap/positionmap.html", controller: this.controller, renderMode: RenderMode.ASYNC_RENDER })
          // .zoomAccess(true)
          .width("100%")
          .height("100%")
          // .mixedMode(MixedMode.All)
          .javaScriptAccess(true)
          .onControllerAttached(()=>{

          })  对应的组件代码

更多关于HarmonyOS 鸿蒙Next中Web组件后加载出来显示布局不对了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

1.首先配置网络权限
“requestPermissions”: [
{
“name”: “ohos.permission.INTERNET”
}

     ]

2.web组件缺少属性 ，示例如下
Web({
src: “https://www.jingback.com/tiandimap/positionmap.html”,
controller: this.controller,
renderMode: RenderMode.ASYNC_RENDER
})
.backgroundColor(Color.White)
.onControllerAttached(() => {
this.controller.setCustomUserAgent('Mozilla/5.0 (Linux; Android 9; VRD-AL10; HMSCore 6.3.0.331) ’ +
‘AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/12.0.4.1 Mobile Safari/537.36’)
})
.domStorageAccess(true)
.javaScriptAccess(true)
.fileAccess(true)
.mixedMode(MixedMode.All)

更多关于HarmonyOS 鸿蒙Next中Web组件后加载出来显示布局不对了的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我这里真机和模拟器都正常，模拟器是Mac ARM版本

鸿蒙Next中Web组件布局异常通常由以下原因导致：

  1. 页面未设置视口元标签，需添加<meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. CSS媒体查询未适配鸿蒙设备分辨率
  3. 组件尺寸未使用自适应单位（如vp/vf）
  4. 页面加载过程中触发了不兼容的JS布局操作

检查网页代码的响应式设计，确保使用鸿蒙官方推荐的适配方案。可通过DevEco Studio的预览器进行多设备布局验证。

在HarmonyOS Next的Web组件中遇到布局显示异常，通常与页面适配或渲染模式有关。建议检查以下方面：

  1. 视口设置：确保加载的网页包含正确的<meta name="viewport">标签，以适配移动端布局。例如：

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

  2. 渲染模式调整：尝试将RenderMode.ASYNC_RENDER改为RenderMode.SYNC_RENDER，同步渲染可能更稳定：

    renderMode: RenderMode.SYNC_RENDER

  3. 尺寸约束：虽然设置了width("100%")和height("100%")，但需确认父容器尺寸是否明确，避免百分比布局计算错误。

  4. CSS兼容性：部分网页CSS可能未适配鸿蒙的Web内核，可通过浏览器开发者工具检查样式是否正常应用。

若问题仍存在，可尝试通过onPageEnd事件监听页面加载完成后的DOM操作，动态调整样式。

回到顶部