HarmonyOS 鸿蒙Next 第三方h5页面打开是乱的,在ios和安卓均是正常的,demo见下面

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

HarmonyOS 鸿蒙Next 第三方h5页面打开是乱的,在ios和安卓均是正常的,demo见下面

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct TestLocation {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({
        src: 'xxx',
        controller: this.webviewController
      })
        .domStorageAccess(true)
        .verticalScrollBarAccess(false)
        .zoomAccess(false)
        .horizontalScrollBarAccess(false)
        .layoutMode(WebLayoutMode.NONE)
        .layoutWeight(1)
    }

  }
}

更多关于HarmonyOS 鸿蒙Next 第三方h5页面打开是乱的,在ios和安卓均是正常的,demo见下面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

如果这个页面没有适配过鸿蒙的UA那是会有问题的,鸿蒙的UA可以参考:‘https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-30-V5
要不就是UA设置为

.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')
})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>


建议去适配鸿蒙UA

更多关于HarmonyOS 鸿蒙Next 第三方h5页面打开是乱的,在ios和安卓均是正常的,demo见下面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next 第三方H5页面显示混乱的问题,可能是由于鸿蒙系统对HTML/CSS/JavaScript的解析或渲染机制与iOS和Android存在差异所导致。以下是一些可能的原因及解决方法:

  1. CSS兼容性:检查H5页面中的CSS样式,确保它们兼容鸿蒙系统的WebView组件。特别是针对Flexbox、Grid等布局方式,以及字体、边距、对齐等样式的处理。

  2. JavaScript执行差异:部分JavaScript代码可能在鸿蒙系统上执行结果与iOS和Android不同。检查是否有特定代码段导致页面显示异常,并尝试优化或替换这些代码。

  3. Meta标签设置:确保H5页面的<meta>标签正确设置,特别是viewport属性,以适配鸿蒙系统的屏幕大小和分辨率。

  4. 鸿蒙系统WebView特性:了解鸿蒙系统WebView的特性和限制,如是否支持某些HTML5特性、CSS3属性等。根据这些信息调整H5页面的代码。

  5. 更新鸿蒙系统:确保鸿蒙系统为最新版本,因为系统更新可能修复了旧版本中的WebView渲染问题。

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

回到顶部