HarmonyOS 鸿蒙Next：web 加载 url ，如何让网页的内容自适应宽度

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：web 加载 url ，如何让网页的内容自适应宽度

  用web 加载网页，发现不能自适应屏幕的宽度。不能占满屏幕的宽度，特别是图片。感觉排版不好看 。

 

Harmonyos Next教程
4 回复

HarmonyOS 鸿蒙Next教程学学：https://www.itying.com/category-93-b0.html

具体情况不清楚耶。你是加载的html 还是 h5链接。可以分享出来，帮一起调试

1 由于我们加载 html 的宽高 默认px，导致图片不能自适应，跟华为那边反馈帮助，目前已经实现了，所以特地分享出来

2 那边的方案

  (1) 加载 html 

/*     private webVC1: WebviewController = new webview.WebviewController()
  style: string = '<style>* img{width:100%!important;height:auto!important}</style>'
  Web({src:'', controller: this.webVC1})
        .onControllerAttached(()=>{
          this.webVC1.loadData(
            this.body,
            "text/html",
            "UTF-8",
            'about:blank',
            'about:blank'
          );
        })
        .layoutMode(WebLayoutMode.FIT_CONTENT)*/

(2) 加载url

   

Web({src:this.src, controller: this.webVC2})
        .onControllerAttached(() => {
          this.webVC2.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)
        .geolocationAccess(true)
        .mixedMode(MixedMode.All)
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST,
          scrollBackward: NestedScrollMode.PARENT_FIRST,
        })
        .width('100%')
        .height('100%')

在HarmonyOS鸿蒙Next系统中，若要实现web加载的URL内容自适应宽度，可以通过以下方式进行设置：

  1. WebView组件配置：确保你的WebView组件已经正确初始化并加载了URL。在WebView的配置中，通常需要设置一些属性以确保内容自适应。例如，可以启用JavaScript支持，并设置WebView的缩放类型和布局模式。

  2. CSS响应式设计：确保你的网页内容使用了CSS的响应式设计。这包括使用媒体查询（media queries）来根据不同的屏幕尺寸调整布局和样式。

  3. WebView宽度设置：在布局文件中，确保WebView的宽度设置为match_parent或相应的百分比值，这样WebView会根据父容器的宽度自动调整大小。

  4. Java/Kotlin代码设置：在代码中，可以进一步设置WebView的宽高属性，确保其与父容器的尺寸相匹配。同时，可以监听窗口大小变化事件，动态调整WebView的内容。

  5. 调试与测试：加载不同的URL，测试网页内容在不同屏幕尺寸下的显示效果，确保自适应宽度设置生效。

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

回到顶部