HarmonyOS 鸿蒙Next 第三方h5页面打开是乱的,在ios和安卓均是正常的,demo见下面
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
如果这个页面没有适配过鸿蒙的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存在差异所导致。以下是一些可能的原因及解决方法:
-
CSS兼容性:检查H5页面中的CSS样式,确保它们兼容鸿蒙系统的WebView组件。特别是针对Flexbox、Grid等布局方式,以及字体、边距、对齐等样式的处理。
-
JavaScript执行差异:部分JavaScript代码可能在鸿蒙系统上执行结果与iOS和Android不同。检查是否有特定代码段导致页面显示异常,并尝试优化或替换这些代码。
-
Meta标签设置:确保H5页面的
<meta>
标签正确设置,特别是viewport
属性,以适配鸿蒙系统的屏幕大小和分辨率。 -
鸿蒙系统WebView特性:了解鸿蒙系统WebView的特性和限制,如是否支持某些HTML5特性、CSS3属性等。根据这些信息调整H5页面的代码。
-
更新鸿蒙系统:确保鸿蒙系统为最新版本,因为系统更新可能修复了旧版本中的WebView渲染问题。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html