HarmonyOS 鸿蒙Next webview 加载富文本怎么自适应大小
HarmonyOS 鸿蒙Next webview 加载富文本怎么自适应大小
webview 加载富文本怎么自适应大小
2 回复
可以在H5页面头部加入此段代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复制
import { webview } from '[@kit](/user/kit).ArkWeb'
[@Entry](/user/Entry)
[@Component](/user/Component)
export struct WebSelfAdaptivePage {
[@State](/user/State) dataSource: TestDataSource =
new TestDataSource(['hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf', '测试', 'dsafhjkdsafhjkdsah',
'你看监控大舅撒范德萨了',
'fdasfdsafdsa', 'hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf', '测试', 'dsafhjkdsafhjkdsah',
'你看监控大舅撒范德萨了',
'fdasfdsafdsa', 'hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf', '测试', 'dsafhjkdsafhjkdsah',
'你看监控大舅撒范德萨了', 'fdasfdsafdsa', 'hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf',
'测试', 'dsafhjkdsafhjkdsah', '你看监控大舅撒范德萨了', 'fdasfdsafdsa',
'hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf', '测试', 'dsafhjkdsafhjkdsah', '你看监控大舅撒范德萨了',
'fdasfdsafdsa',
'hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf', '测试', 'dsafhjkdsafhjkdsah', '你看监控大舅撒范德萨了',
'fdasfdsafdsa', 'hdcjsahfjkdsahfkdsajhfjkdsahfdsjakhfjkdsahfjdksaf', '测试', 'dsafhjkdsafhjkdsah',
'你看监控大舅撒范德萨了', 'fdasfdsafdsa'])
build() {
Column() {
List() {
LazyForEach(this.dataSource, (testStr: string, index: number) => {
testListItem({ index: index, htmlStr: testStr })
})
}
}
}
}
[@Component](/user/Component)
export struct testListItem {
index?: number
controller: webview.WebviewController = new webview.WebviewController();
htmlStr?: string
[@State](/user/State) h5Height: number = 2
[@State](/user/State) h5Width: number = 300;
build() {
Column() {
Column() {
Web({ src: '', controller: this.controller })
.verticalScrollBarAccess(false)
.height(this.h5Height)
.backgroundColor('#00000000')
.onAppear(() => {
this.controller.loadData(this.getHtmlContent(this.htmlStr ?? ""), "text/html", "UTF-8", " ", " ");
})
.onPageEnd((event) => {
// 推荐在此事件中执行JavaScript脚本
const script = '[document.body.offsetWidth, document.documentElement.scrollHeight]';
this.controller.runJavaScriptExt(script).then((result) => {
switch (result.getType()) {
case webview.JsMessageType.ARRAY:
this.h5Width = (result.getArray() as number[])[0];
console.log('width ====' + this.h5Width)
this.h5Height = (result.getArray() as number[])[1]; // 这里的单位是vp
console.log('height ===='+this.h5Height)
break;
default:
break;
}
});
})
}
.width(this.h5Width+24)
.constraintSize({
maxWidth: 300
})
.padding({ left: 12, right: 12 })
.backgroundColor(Color.Blue)
}
.padding({ top: 10 })
.width('100%')
}
复制
getHtmlContent(str: string): string {
let head = "<head>" +
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +
"<style type=\"text/css\"> body { line-height:" + (150) + "%} </style> \n" +
"<style>img{max-width: 100%; width:auto; height:auto;}</style>" + //图片适应屏幕
"<style>iframe {display: block;max-width:100%;\n" + //视频适应屏幕
" margin-top:10px; margin-bottom:10px;}</style>" +
"<style type=\"text/css\"> \n" +
"</style> \n" +
"</head>";
let htmlStr =
"<html>" + head + "<body style='display: inline-block;margin: 0;padding: 8px;'>" + str + "</body>" +
"</html>
更多关于HarmonyOS 鸿蒙Next webview 加载富文本怎么自适应大小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，WebView加载富文本自适应大小的问题，可以通过以下方式实现：
-
设置WebView布局参数：确保WebView的布局参数设置为可填充父容器，例如使用
match_parent或wrap_content，具体取决于你的需求。这允许WebView根据内容大小自动调整。 -
使用CSS样式：在富文本内容中，通过CSS样式控制元素的宽度、高度以及字体大小等属性，使其能够自适应不同屏幕尺寸。例如，使用百分比宽度、
max-width、min-width等属性。 -
JavaScript动态调整：在WebView加载完成后，通过JavaScript动态调整内容的大小。可以监听WebView的加载完成事件，然后执行JavaScript代码来计算并调整内容的大小。
-
WebView设置：检查WebView的设置，确保没有禁用自动调整大小的功能。例如，确保没有设置固定的布局大小或禁用了缩放功能。
-
测试与调试：在不同屏幕尺寸和分辨率的设备上测试WebView的富文本加载效果，确保内容能够自适应显示。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
