鸿蒙开发中，如何使H5页面适配多设备？

Question

鸿蒙开发中，如何使H5页面适配多设备？

Answer 1

目前可以通过修改 ua 的方式来自适应不同设备，UserAgent 的内容可以参考默认 UserAgent 定义，可以通过 deviceType 识别设备类型用于不同设备上的页面显示。所以在多设备情况下，可以通过读取设备的 UserAgent 并将该值设置给 webview，使得页面可以通过读取自己 UserAgent 并设置正确的设备类型，从而完成在不同设备上的页面显示。
参考代码：

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

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  userAgent : string = '';
  phone_ua : string = "Mozilla/5.0 (Phone; Android; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile"

  build() {
    Column() {
      Web({ src: 'www.xxx.com', controller: this.controller })
       .width('100%')
       .mixedMode(MixedMode.All)
       .onControllerAttached(() => {
          this.controller.setCustomUserAgent(this.phone_ua);
        })
    }
  }
}