目录

Web组件的metaViewport属性使用注意事项

问题现象

Web组件使用metaViewport属性可以设置meta标签的viewport属性是否可用。该属性默认开启，当网页在平板加载时存在viewport属性不生效的情况。

解决方案

metaViewport设置meta标签的viewport属性是否可用。当属性没有显式调用时，默认支持meta标签的viewport属性。

HTML中<meta name="viewport">是一个HTML元标签，用于定义网页在移动设备浏览器中的显示视口（viewport），其中的content属性用于定义具体的视口设置，常用属性包括：

metaViewport属性用于设置前端网页viewport属性是否可用，如下示例，在Web组件侧设置metaViewport属性为true，可确保网页内容自适应屏幕宽度。

Web({
  // 更改为实际网页或要加载的HTML页面
  src: 'www.example.com',
  controller: this.controller
})
  .metaViewport(true)

也可通过runJavaScript执行JavaScript脚本修改viewport中的content内容控制网页视口。

this.controller.runJavaScript(`
  let metaViewport = document.querySelector('meta[name="viewport"]');
  if (metaViewport) {
    // 修改content属性，更新initial-scale的值
    metaViewport.setAttribute('content', 'width=device-width, initial-scale=1.3, minimum-scale=1.0, maximum-scale=4.0, user-scalable=yes');
    console.info('Initial scale changed to 1.3');
  } else {
    console.info('Viewport meta tag not found');
  }`
);

完整示例参考如下：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct SettingViewport {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('缩放')
        .onClick(() => {
          this.controller.runJavaScript(`
            let metaViewport = document.querySelector('meta[name="viewport"]');
            if (metaViewport) {
              // 修改content属性，更新initial-scale的值
              metaViewport.setAttribute('content', 'width=device-width, initial-scale=1.3, minimum-scale=1.0, maximum-scale=4.0, user-scalable=yes');
              console.info('Initial scale changed to 1.3');
            } else {
              console.info('Viewport meta tag not found');
            }`
          );
        });
      Web({
        // 更改为实际网页或要加载的HTML页面
        src: 'www.example.com',
        controller: this.controller
      })
        .metaViewport(true)
        .geolocationAccess(false)
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .javaScriptAccess(true)
        .fileAccess(true)
        .zoomAccess(true);
    };
  }
}

使用metaViewport属性需要注意以下事项：

  • 如果设备为2in1，不支持viewport属性。设置为true或者false均不会解析viewport属性，进行默认布局。
  • 如果设备为Tablet，设置为true或false均会解析meta标签viewport-fit属性。当viewport-fit=cover时，可通过CSS属性获取安全区域大小。
  • 当前通过User-Agent中是否含有"Mobile"字段来判断是否开启前端HTML页面中meta标签的viewport属性。当User-Agent中不含有"Mobile"字段时，meta标签中viewport属性默认关闭，此时可通过显式设置metaViewport属性为true来覆盖关闭状态。
  • 使用zoom的相关方法无法对设置了user-scalable=no的网页生效，可以设置metaViewport为false进行屏蔽，或使用runJavaScript执行JavaScript脚本修改viewport。