0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
liujixin666liujixin666整改ArkWeb HO sample工程路径(OH=HO)
dd6ee2c4创建于 2025年12月25日历史提交

使用Web组件管理网页缩放

介绍

本工程主要实现了对以下指南文档中 使用Web组件管理网页缩放 示例代码片段的工程化，主要目标是帮助开发者快速了解Web组件支持手势缩放、鼠标滚轮、键盘缩放，以方便用户调整到舒适的显示大小。并对应用提供监听、控制页面缩放比例的功能，以便应用实现个性化的视觉效果。

使用说明

  1. 通过.zoomAccess(false)可禁用手势缩放，PC/2合1设备需单独设置zoomAccess，可通过拦截键盘事件禁用Ctrl+±快捷键缩放。
  2. 使用.onScaleChange监听缩放变化，实时获取新旧比例值。

启用/禁用网页缩放

启用/禁用网页手势缩放

介绍
  1. 通过属性zoomAccess控制网页缩放功能，当设置为false时，网页不允许手势缩放行为。
效果预览

使用说明
  1. 创建一个Web组件，通过WebviewController加载指定网页并禁用缩放功能。

启用/禁用网页键盘鼠标缩放

介绍
  1. ArkWeb默认支持通过Ctrl+按键'-'/'+' 或者 Ctrl+鼠标滚轮进行缩放。应用可以通过拦截键盘事件来阻止按键缩放，当前暂未支持拦截Ctrl+鼠标滚轮缩放。
效果预览

使用说明
  1. 启用网页缩放功能，通过拦截Ctrl+加号/减号键的键盘事件来实现自定义的网页缩放控制逻辑。

监听页面缩放比例变化

介绍
  1. 应用可以通过onScaleChange接口监听页面缩放比例的变化。
  2. 该接口事件对应手势事件(双指缩放)，event.newScale对应网页属性visualViewport.scale。
效果预览

使用说明
  1. 当用户在网页中进行缩放操作时，该组件会通过回调函数实时输出新旧缩放比例的变化信息。

控制网页的缩放比例

以固定比例缩放页面

介绍
  1. 应用可以通过设置initialScale属性设置页面初始缩放比例。
  2. zoomIn将当前网页进行放大，比例为25%；zoomOut将当前网页进行缩小，比例为20%。
效果预览

使用说明
  1. 通过"zoomIn"和"zoomOut"两个按钮来放大和缩小网页内容，并提供了完善的错误处理机制来捕获缩放操作中的异常情况。

根据输入值控制页面缩放比例

介绍
  1. zoom基于当前网页比例进行缩放，入参要求大于0，当入参为1时为默认加载网页的缩放比例，入参小于1为缩小，入参大于1为放大。
效果预览

使用说明
  1. 用户可以通过文本输入框输入任意数字作为缩放因子，点击按钮后网页将按照指定比例进行缩放，并具备完整的错误处理机制。

缩放页面到目标比例

介绍
  1. 通过onScaleChange接口，应用可以得知当前网页的缩放比例，配合zoom接口即可实现将页面缩放至指定比例的功能。
效果预览

使用说明
  1. 通过实时监听页面缩放变化，将用户输入的目标缩放值自动转换为相对当前比例的调整因子，实现精确的缩放控制并具备完善的错误处理机制。

工程目录

entry/src/main/
|---ets
|---|---entryability
|---|---|---EntryAbility.ets
|---|---pages
|---|---|---ControlMouseAndKeyBoardZooming.ets
|---|---|---ControlWebGestureZooming.ets
|---|---|---ControlZoomByFixedRatio.ets
|---|---|---ControlZoomByInput.ets
|---|---|---ControlZoomToFixedRatio.ets
|---|---|---Index.ets					// 首页
|---|---|---MonitorZoomRatio.ets
|---resources								// 静态资源
|---ohosTest
|---|---ets
|---|---|---tests
|---|---|---|---Ability.test.ets            // 自动化测试用例

具体实现

  1. 通过属性zoomAccess控制网页缩放功能，当设置为false时，网页不允许手势缩放行为。
  2. ArkWeb默认支持通过Ctrl+按键'-'/'+' 或者 Ctrl+鼠标滚轮进行缩放。应用可以通过拦截键盘事件来阻止按键缩放，当前暂未支持拦截Ctrl+鼠标滚轮缩放。
  3. 应用可以通过onScaleChange接口监听页面缩放比例的变化。 该接口事件对应手势事件(双指缩放)，event.newScale对应网页属性visualViewport.scale。
  4. zoomIn将当前网页进行放大，比例为25%；zoomOut将当前网页进行缩小，比例为20%。
  5. zoom基于当前网页比例进行缩放，入参要求大于0，当入参为1时为默认加载网页的缩放比例，入参小于1为缩小，入参大于1为放大。
  6. 通过onScaleChange接口，应用可以得知当前网页的缩放比例，配合zoom接口即可实现将页面缩放至指定比例的功能。根据当前页面缩放比例pageFactor和目标比例targetFactor计算zoom入参的公式为：factor = 100 * targetFactor / pageFact

相关权限

不涉及。

依赖

不涉及。

约束与限制

  1. 本示例仅支持标准系统上运行, 支持设备：华为手机。

  2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。

  3. DevEco Studio版本：6.0.0 Release及以上。

  4. HarmonyOS SDK版本：HarmonyOS 6.0.0 Release SDK及以上。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo ArkWebKit/WebManagementZooming > .git/info/sparse-checkout
git remote add origin https://gitee.com/harmonyos_samples/guide-snippets.git
git pull origin master