1# Web组件大小自适应页面内容布局 2<!--Kit: ArkWeb--> 3<!--Subsystem: Web--> 4<!--Owner: @yp99ustc--> 5<!--Designer: @LongLie--> 6<!--Tester: @ghiker--> 7<!--Adviser: @HelloCrease--> 8 9使用Web组件大小自适应页面内容布局模式`layoutMode(WebLayoutMode.FIT_CONTENT)`时，能使Web组件的大小根据页面内容自适应变化。 10 11## 使用场景 12 13适用于Web组件需要根据网页高度撑开，与其他系统组件一起滚动的场景，如： 14 15- 浏览长文章。Web组件同一布局层级有其他系统组件，如评论区、工具栏等。 16- 长页面首页。Web组件同一布局层级有其他系统组件，如宫格菜单。 17 18**Web布局跟随系统：** 19 20如图一所示，Web组件的高度为一屏，H5页面的高度为8000px，大于Web组件的高度，此时Web组件内部将会出现滚动条。滚动Web组件时，页面的一部分将被隐藏，且不能充分利用整个屏幕展示Web页面，这会导致用户体验不佳。实际效果如图二所示。 21 22| 图一 Web布局跟随系统| 图二 Web布局跟随系统实机效果| 23| --- | --- | 24|  |  | 25 26**Web组件大小自适应页面内容布局：** 27 28如图三所示，Web组件高度将自动与H5页面保持一致。右图显示，Web组件与H5页面的高度均为8000px。此时，Web组件内部不会生成滚动条，在滑动页面时，可同时带动其他ArkUI组件滚动，以整个屏幕展示Web组件。实际效果见图四。 29 30| 图三 Web组件大小自适应页面内容布局| 图四 Web组件大小自适应页面内容布局实机效果| 31| --- | --- | 32|  |  | 33 34## 规格与约束 35 361. 建议配置[渲染模式](web-render-mode.md)为[同步渲染模式](web-render-mode.md#同步渲染模式)，避免因为组件大小超出限制导致异常场景（白屏，布局错误）。 372. 建议配置[过滚动模式(overScrollMode)](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#overscrollmode11)为关闭状态。当过滚动模式开启时，当用户在Web界面上滑动到边缘时，Web会通过弹性动画弹回界面，会与Scroll组件的回弹相互冲突，影响体验。 383. [键盘避让(keyboardAvoidMode)](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#keyboardavoidmode12)属性配置为RESIZE_CONTENT时，该避让模式不生效。 394. 不支持对页面进行缩放。 405. 不支持通过Web组件的height属性修改组件高度。 416. 仅支持根据页面内容自适应组件高度，不支持自适应宽度。 427. 不支持瀑布流页面。 43 44## 示例代码 45 46```typescript 47// fit_content_test.ets 48import { webview } from '@kit.ArkWeb'; 49 50@Entry 51@Component 52struct WebHeightPage { 53 private webviewController: WebviewController = new webview.WebviewController() 54 private scroller: Scroller = new Scroller() 55 56 build() { 57 Navigation() { 58 Column() { 59 Scroll(this.scroller) { 60 Column() { 61 Web({ 62 src: $rawfile("fit_content.html"), 63 controller: this.webviewController, 64 renderMode: RenderMode.SYNC_RENDER // 设置为同步渲染模式 65 }) 66 .layoutMode(WebLayoutMode.FIT_CONTENT) // 设置为Web组件大小自适应页面内容 67 .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态 68 Text("评论区") 69 .fontSize(28) 70 .fontColor("#FF0F0F") 71 .height(100) 72 .width("100%") 73 .backgroundColor("#f89f0f") 74 } 75 } 76 77 } 78 } 79 .title("标题栏") 80 } 81} 82``` 83 84```html 85<!--fit_content.html--> 86<!DOCTYPE html> 87<html> 88<head> 89 <meta charset="UTF-8"> 90 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 91 <title>Fit-Content</title> 92</head> 93<body> 94<div> 95 <div><h2 id="使用场景">使用场景</h2> 96 <p>ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容。常见使用场景包括：</p> 97 <ul> 98 <li><p> 99 应用集成Web页面：应用可以在页面中使用Web组件，嵌入Web页面内容，以降低开发成本，提升开发、运营效率。</p> 100 </li> 101 <li><p> 102 浏览器网页浏览场景：浏览器类应用可以使用Web组件，打开三方网页，使用无痕模式浏览Web页面，设置广告拦截等。</p> 103 </li> 104 <li><p>小程序：小程序类宿主应用可以使用Web组件，渲染小程序的页面。</p></li> 105 </ul> 106 </div> 107 <div><h2 id="能力范围">能力范围</h2> 108 <p>Web组件为开发者提供了丰富的控制Web页面能力。包括：</p> 109 <ul> 110 <li><p>Web页面加载：声明式加载Web页面和离屏加载Web页面等。</p></li> 111 <li><p>生命周期管理：组件生命周期状态变化，通知Web页面的加载状态变化等。</p></li> 112 <li><p>常用属性与事件：User-Agent管理、Cookie与存储管理、字体与深色模式管理、权限管理等。</p> 113 </li> 114 <li><p> 115 与应用界面交互：自定义文本选择菜单、上下文菜单、文件上传界面等与应用界面交互能力。</p> 116 </li> 117 <li><p>App通过JavaScriptProxy，与Web页面进行JavaScript交互。</p></li> 118 <li><p>安全与隐私：无痕浏览模式、广告拦截、坚盾守护模式等。</p></li> 119 <li><p>维测能力：DevTools工具调试能力，使用crashpad收集Web组件崩溃信息。 120 </p></li> 121 <li><p> 122 其他高阶能力：与系统组件同层渲染、Web组件的网络托管、Web组件的媒体播放托管、Web组件输入框拉起自定义输入法、等。</p> 123 </li> 124 </ul> 125 </div> 126 <div><h2 id="约束与限制">约束与限制</h2> 127 <ul> 128 <li>Web内核版本：ArkWeb基于谷歌Chromium内核开发，使用的Chromium版本为M114。</li> 129 </ul> 130 </div> 131</div> 132</body> 133</html> 134``` 135 136## 常见问题 137 138### 设置了FIT_CONTENT，但Web组件内仍出现滚动条 139 140**可能原因：** 141 142- 内部H5页面高度超过了7680px（物理像素），但没有设置渲染模式为[同步渲染模式](web-render-mode.md#同步渲染模式)。 143- 未配置metaviewport属性。 144 145**解决方案：** 146 147- 更改渲染模式为[同步渲染模式](web-render-mode.md#同步渲染模式)。 148- 在H5页面增加meta配置`<meta name="viewport" content="width=device-width, initial-scale=1.0">` 149 150 151### 设置FIT_CONTENT后，页面白屏或页面消失不显示 152 153**可能的原因：** 154 155核心内容dom节点高度为0。 156 157css样式`height：<number> vh`和Web组件大小自适应页面布局存在计算冲突，请检查`height：<number> vh`是否是由body节点而内的第一个高度css样式。如以下结构，id为2的dom节点高度将为0。 158 159``` 160<body> 161 <div id = "1"> 162 <div id = "2" style = "height: 100vh">子dom</div> 163 <div id = "3" style = "height: 20px">子dom</div> 164 </div> 165</body> 166``` 167 168**解决方案：** 169 170- 子dom使用具体高度样式撑开父元素。 171 172 ``` 173 <body> 174 <div id = "1"> 175 <div id = "2"><div style = "height: 20px"></div></div> 176 <div id = "3" style = "height: 20px">子dom</div> 177 </div> 178 </body> 179 ``` 180 181- 父元素使用实际高度样式。 182 183 ``` 184 <body> 185 <div id = "1"> 186 <div id = "2" style = "height: 20px">子dom</div> 187 <div id = "3" style = "height: 20px">子dom</div> 188 </div> 189 </body> 190 ``` 191 192 193
