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

#### 问题现象

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

#### 解决方案

[metaViewport](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-attributes#metaviewport12)设置meta标签的viewport属性是否可用。当属性没有显式调用时，默认支持meta标签的viewport属性。

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

*   width：定义视口的宽度，通常设置为device-width，表示视口宽度等于设备的屏幕宽度。
*   initial-scale：定义页面的初始缩放比例，通常设置为1.0，表示页面以1:1的比例显示。
*   maximum-scale：定义页面的最大缩放比例，防止用户过度放大页面。
*   minimum-scale：定义页面的最小缩放比例，防止用户过度缩小页面。
*   user-scalable：定义用户是否可以手动缩放页面，默认设置为yes表示允许手动缩放，no表示禁止手动缩放。

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

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

也可通过[runJavaScript](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#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);
    };
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/20/v3/UVXrbogpSgWsZ14up8BRBQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134151Z&HW-CC-Expire=86400&HW-CC-Sign=530F3AE7FB535C0DE979D96FEACCCB58AE6C1A63586D776F6B450FCDF6D7CD00)

使用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](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#zoom)的相关方法无法对设置了user-scalable=no的网页生效，可以设置metaViewport为false进行屏蔽，或使用runJavaScript执行JavaScript脚本修改viewport。