HarmonyOS鸿蒙Next中Web组件加载url显示为电脑网页如何适配

【问题现象】

Web组件加载url显示为电脑版网页，不是手机版网页。

预期效果：加载的网页能配置手机的屏幕，在手机正常展示。

实际效果：展示为电脑网页，不适配手机屏幕。

如下图: 加载url为电脑页面，无法顺利下滑上滑和与页面完全适配。

下图是已适配的url，页面完整贴合屏幕，能顺畅滑动。

【背景知识】

• ArkWeb：@ohos.web.webview提供web控制能力，Web组件提供网页显示的能力。
• Web用户代理UserAgent定义：
  从API version 11起，Web组件基于ArkWeb的内核，默认UserAgent定义如下：
  Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}。

【定位思路】

因为url加载的网页是电脑网页，所以不做任何适配的话，在手机端加载的电脑网页会显示异常。

因此对于同一个url的网页，需要适配多种设备，例如: 平板，手机，电脑等，而且适配多种设备型号，比如Mate60, Mate60 Pro。

需要：

1. 设备端能够传给网页设备的标识。
2. 网页开发者能够根据设备的标识做对该网页对相应的设备做样式的适配。

【解决方案】

1. 通过设置UserAgent，把设备端标识信息传递给网页，因此网页端可以通过deviceType识别设备类型。

aboutToAppear(): void {
  webview.once('webInited', () => {
    try {
      // 应用侧用法示例，定制UserAgent。
      this.ua = this.controller.getUserAgent() + 
      'Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}';
      this.controller.setCustomUserAgent(this.ua);
    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
    }
  })
}

其中deviceType，OSName，OSVersion，Mobile等参数定义如下:

1. 网页侧通过userAgent，获得设备端标识信息，代码示例如下:

<script>
  window.onload = function() {
    const resultText = document.getElementById("result");
    // 获得userAgent
    resultText.innerHTML = navigator.userAgent;  
  }
</script>

1. 在Web的onControllerAttached里面设置UserAgent。

@State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 ArkWeb/4.1.6.1 Mobile automobile/792 HuaweiBrowser'
Web({ src: '', controller: this.controller})
  .onControllerAttached(()=>{
    this.controller.setCustomUserAgent(this.userAgent);
    this.controller.loadUrl('xxxxxx')
})

【总结】

网页开发者需要根据设备端传递的设备信息对网页做相应的适配，以适配多种设备以及设备型号。