HarmonyOS Web控件加载网页视口(viewport)过大,导致网页显示效果不佳问题

加载原有项目网页,使用HarmonyOS web控件,发现这个显示效果不佳。怀疑是这个 viewport 属性设置有关。HarmonyOS上,我没有找到对应的设置api。需要怎么适配,网页大小才有一个好的显示效果。

HarmonyOS
2024-11-07 11:07:15
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

​加载网页视口自适应大小可以通过以下两种方法去实现:

一:通过监听html的高度,然后把高度值传输过来;放在arkts中的生命周期回调里面,html加载完毕的回调里面然后设置webview的高度。

代码如下:

index.html:​

<!DOCTYPE html> <html> <body> <p> <h1>1111111111</h1> <h2>1111111111</h2> <h2>1111111111</h2> </p> </body> <script type="text/javascript"> function watchWindowSize(){ var h = document.body.clientHeight; return h; } </script> </html> 
  .onPageEnd(e => { 
    this.controller.runJavaScript( 
      'watchWindowSize()', 
      (error,result)=> { 
        this.webResult = result 
        let pageHeight = this.controller.getPageHeight() + ''; 
        pageHeight = this.webResult; 
        console.info("webResult=" + this.webResult); 
        console.info("pageHeight=" + pageHeight); 
      } 
    ) 
  })

​二:通过设置.layoutWeight(1)进行自适应大小

1、wideViewModeAccess已废弃,所以不生效,目前没有API可以直接设置。

2、解决方法:可以将容器的宽高通过jsbridge传给web侧,在web侧设置。参考文档: ​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-app-page-data-channel-V5

分享
微博
QQ
微信
回复
2024-11-07 17:37:10
相关问题
使用Web组件加载网页显示空白。
375浏览 • 1回复 待解决
HarmonyOS Web加载网页白屏
418浏览 • 1回复 待解决
关于 web 网页打开速度
154浏览 • 1回复 待解决
HarmonyOS 如何实现加载网页的能力?
113浏览 • 1回复 待解决
如何对网页进行预加载
436浏览 • 1回复 待解决
Web加载网页后获取当前页面和url
1066浏览 • 1回复 待解决
WebView加载网页无法自适应
138浏览 • 1回复 待解决
Web网页如何申请位置权限?
440浏览 • 1回复 待解决
HarmonyOS web控件加载富文本,字太小
280浏览 • 1回复 待解决