HarmonyOS 鸿蒙Next客户端适配问题

【背景知识】

• textZoomRatio 属性在 Web 组件中用于设置文本的缩放比例。这个属性允许开发者指定网页文本内容的放大或缩小程度，这对于改善用户体验或者满足特定的视觉需求非常有用。
• runJavaScript：异步执行 JavaScript 脚本，并通过回调方式返回脚本执行的结果。runJavaScript 需要在 loadUrl 完成后，比如 onPageEnd 中调用。
• rem：CSS 中的相对长度单位（相对于 HTML 根元素的字体大小），通过修改 HTML 根元素的字体大小，实现等比例缩放。
• display.on(‘foldDisplayModeChange’)：开启折叠设备屏幕显示模式变化的监听。

【解决方案】

• 文本和图片等比例缩放：

  • 文本缩放：设置 Web 组件的 textZoomRatio 属性缩放文本。

  • 图片缩放：若所有需要缩放的图片有相同的 CSS 类名，可采用 runJavaScript 注入或修改该类的宽高样式，示例代码：

    import { webview } from '[@kit](/user/kit).ArkWeb';
    
    [@Entry](/user/Entry)
    [@Component](/user/Component)
    struct Index {
      url: string = 'https://weixin.sxyygh.com/harmony/index.html#/'
    
      private webviewController: WebviewController = new webview.WebviewController()
      private customStyle: string = '.weex-ct{border:5px solid black}';
    
      onBackPress() {
        // 当前页面是否可前进或者后退给定的 step 步 (-1),正数代表前进，负数代表后退
        if (this.webviewController.accessStep(-1)) {
          this.webviewController.backward(); // 返回上一个 web 页
          // 执行用户自定义返回逻辑
          return true
        } else {
          // 执行系统默认返回逻辑，返回上一个 page 页
          return false
        }
      }
    
      build() {
        Column() {
          Button('style').onClick(event => {
            // 可以在 onPageEnd 调用该方法注入 css 样式
            this.webviewController.runJavaScript(`
              const head = document.head;
              console.log(head);
              const style = document.createElement('style');
              style.appendChild(document.createTextNode("${this.customStyle}"));
              head.appendChild(style)
            `);
          })
          Web({
            src: this.url,
            controller: this.webviewController,
          })
            .fileAccess(true)
            .javaScriptAccess(true)
            .domStorageAccess(true)
            .onlineImageAccess(true)
            .mixedMode(MixedMode.All)
            .textZoomRatio(50) // 要设置的页面的文本缩放百分比。取值为整数，范围为(0,+∞)。默认值：100。
            .onPageEnd(e => { // 对所有长宽相等的 weex-image 缩放到 80%
              this.controller.runJavaScript(`
                let weexImages = document.getElementsByClassName('weex-image');
                for (let i = 0; i < weexImages.length; i++) {
                  if (weexImages[i].style.width === weexImages[i].style.height) {
                    let newLength = parseFloat(weexImages[i].style.width) * 0.8 + 'rem';
                    weexImages[i].style.width = newLength;
                    weexImages[i].style.height = newLength;
                  }
                }
              `)
            })
        }
        .width('100%')
        .height('100%')
      }
    }
    

• 布局响应折叠设备屏幕显示模式变化：在折叠状态改变时，根据屏幕宽度变化，等比例修改 H5 页面根元素的字体大小（fontSize）即可。示例代码：

  import { webview } from '[@kit](/user/kit).ArkWeb';
  import { display } from '[@kit](/user/kit).ArkUI';
  
  [@Entry](/user/Entry)
  [@Component](/user/Component)
  struct Index {
    controller: webview.WebviewController = new webview.WebviewController()
    // 记录当前屏幕宽度
    private lastScreenWidth: number = display.getDefaultDisplaySync().width
  
    aboutToAppear(): void {
      // 监听折叠设备屏幕显示模式变化
      display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => {
        // 获取折叠设备屏幕显示模式变化后的屏幕宽度，计算出与变化前的屏幕宽度的比值，等比例改变 HTML 根元素字体大小
        const currentWidth = display.getDefaultDisplaySync().width
        const ratio = currentWidth / this.lastScreenWidth
        this.controller.runJavaScript(`
          document.documentElement.style.fontSize = parseFloat(document.documentElement.style.fontSize) * ${ratio} + 'px'
        `)
        // 更新当前屏幕宽度
        this.lastScreenWidth = currentWidth
      });
    }
  
    build() {
      RelativeContainer() {
        Web({
          src: 'https://www.example.com',
          controller: this.controller
        })
          .domStorageAccess(true)
          .mixedMode(MixedMode.All)
          .onlineImageAccess(true)
      }
      .height('100%')
      .width('100%')
    }
  }
  

【常见FAQ】

Q：既然 H5 是使用 px 作为长度单位，为什么不通过修改根元素 html 的 fontSize 大小，来改变相同 rem 单位对应的实际像素，从而实现图片和文字的等比例缩放？ A：因为这样一来，不仅是文字和图片会等比例缩放，H5 内使用 rem 作为长度单位的元素尺寸、间距等都会改变。weex 中的根元素 html 的 fontSize 大小（即 1rem）=1/10 屏幕宽度，若 1rem 对应的像素值变少，会导致整个页面缩小，无法占满屏幕宽度。

【总结】

小范围或场景比较单一的样式修改可以采用 runJavaScript 注入或修改 CSS 样式，大范围或复杂样式修改的话建议还是在 H5 页面中实现。