1# Web组件大小自适应页面内容布局
2
3使用Web组件大小自适应页面内容布局模式`layoutMode(WebLayoutMode.FIT_CONTENT)`时，能使Web组件的大小根据页面内容自适应变化。
4
5适用于Web组件需要根据网页高度撑开，与其他原生组件一起滚动的场景，如：
6
7- 浏览长文章。Web组件同一布局层级有其他原生组件，如评论区、工具栏等。
8- 长页面首页。Web组件同一布局层级有其他原生组件，如宫格菜单。
9
10## 规格与约束
11
121. 建议配置[渲染模式](web-render-mode.md)为同步渲染模式，避免因为组件大小超出限制导致异常场景（白屏，布局错误）。
132. 建议配置[过滚动模式](../reference/apis-arkweb/ts-basic-components-web.md#overscrollmode11)为关闭状态。当过滚动模式开启时，当用户在Web界面上滑动到边缘时，Web会通过弹性动画弹回界面，会与Scroll组件的回弹相互冲突，影响体验。
143. [键盘避让](../reference/apis-arkweb/ts-basic-components-web.md#keyboardavoidmode12)属性配置为RESIZE_CONTENT时，该避让模式不生效。
154. 不支持对页面进行缩放。
165. 不支持通过Web组件的height属性修改组件高度。
176. 仅支持根据页面内容自适应组件高度，不支持自适应宽度。
18
19## 使用场景
20
21```typescript
22// fit_content_test.ets
23import { webview } from '@kit.ArkWeb';
24
25@Entry
26@Component
27struct WebHeightPage {
28  private webviewController: WebviewController = new webview.WebviewController()
29  private scroller: Scroller = new Scroller()
30
31  build() {
32    Navigation() {
33      Column() {
34        Scroll(this.scroller) {
35          Column() {
36            Web({
37              src: $rawfile("fit_content.html"),
38              controller: this.webviewController,
39              renderMode: RenderMode.SYNC_RENDER // 设置为同步渲染模式
40            })
41              .layoutMode(WebLayoutMode.FIT_CONTENT) // 设置为Web组件大小自适应页面内容
42              .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态
43            Text("评论区")
44              .fontSize(28)
45              .fontColor("#FF0F0F")
46              .height(100)
47              .width("100%")
48              .backgroundColor("#f89f0f")
49          }
50        }
51
52      }
53    }
54    .title("标题栏")
55  }
56}
57```
58
59```html
60<!--fit_content.html-->
61<!DOCTYPE html>
62<html>
63<head>
64    <meta charset="UTF-8">
65    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
66    <title>Fit-Content</title>
67</head>
68<body>
69<div>
70    <div><h2 id="使用场景">使用场景</h2>
71        <p>ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容。常见使用场景包括：</p>
72        <ul>
73            <li><p>
74                应用集成Web页面：应用可以在页面中使用Web组件，嵌入Web页面内容，以降低开发成本，提升开发、运营效率。</p>
75            </li>
76            <li><p>
77                浏览器网页浏览场景：浏览器类应用可以使用Web组件，打开三方网页，使用无痕模式浏览Web页面，设置广告拦截等。</p>
78            </li>
79            <li><p>小程序：小程序类宿主应用可以使用Web组件，渲染小程序的页面。</p></li>
80        </ul>
81    </div>
82    <div><h2 id="能力范围">能力范围</h2>
83        <p>Web组件为开发者提供了丰富的控制Web页面能力。包括：</p>
84        <ul>
85            <li><p>Web页面加载：声明式加载Web页面和离屏加载Web页面等。</p></li>
86            <li><p>生命周期管理：组件生命周期状态变化，通知Web页面的加载状态变化等。</p></li>
87            <li><p>常用属性与事件：UserAgent管理、Cookie与存储管理、字体与深色模式管理、权限管理等。</p>
88            </li>
89            <li><p>
90                与应用界面交互：自定义文本选择菜单、上下文菜单、文件上传界面等与应用界面交互能力。</p>
91            </li>
92            <li><p>App通过JavaScriptProxy，与Web页面进行JavaScript交互。</p></li>
93            <li><p>安全与隐私：无痕浏览模式、广告拦截、坚盾守护模式等。</p></li>
94            <li><p>维测能力：DevTools工具调试能力，使用crashpad收集Web组件崩溃信息。
95            </p></li>
96            <li><p>
97                其他高阶能力：与原生组件同层渲染、Web组件的网络托管、Web组件的媒体播放托管、Web组件输入框拉起自定义输入法、等。</p>
98            </li>
99        </ul>
100    </div>
101    <div><h2 id="约束与限制">约束与限制</h2>
102        <ul>
103            <li>Web内核版本：ArkWeb基于谷歌Chromium内核开发，使用的Chromium版本为M114。</li>
104        </ul>
105    </div>
106</div>
107</body>
108</html>
109```
110
111
112![web-fit-content](figures/web-fit-content.gif)
113
114
115