51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
视频课免费课排行榜短视频直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

Web组件展示页面片，h5内容会超出Web组件宽度

​使用Web组件展示HTML标签富文本，h5内容宽度超出了Web组件限制的宽度，导致页面右边内容显示不全，且会左右滑动。

页面片内容：​

export const HTMLRichTextTemplate = ` 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Rich_Text</title> 
    <style> 
        html { 
            -webkit-text-size-adjust: 100%; 
            text-align: right; 
        } 
        div { 
            font-size: 15px; 
            color: #666666; 
        } 
        a { 
            color: #3389DF; 
            text-decoration: none; 
        } 
        span { 
            color: #333333; 
        } 
        strong { 
            color: #000000; 
        } 
    </style> 
</head> 
<body> 
<div class='container'> 
    <font color='#DF1F26'>05月22日</font> 
</div> 
</body> 
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

加载页面片的代码：

Web({ 
  src: '', 
  controller: this.webController 
}) 
  .height(this.webHeight) 
  .horizontalScrollBarAccess(false) 
  .textZoomRatio(fp2px(100)) 
  .zoomAccess(false) 
  .width('60%')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

上述的代码中， Web组件的.width设置为 70% 或更大时，才不会出现h5内容宽度超过Web组件的情况；小于70% 都会出现标题描述的问题。

HarmonyOS
zbw_apple
2024-11-06 08:54:40
浏览
赞
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect
superinsect

给html设置<meta name="viewport" content="width=device-width, initial-scale=1.0">即可。

const HTMLRichTextTemplate = ` 
<html> 
<head> 
<title>Rich_Text</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
html { 
-webkit-text-size-adjust: 100%; 
text-align: right; 
} 
div { 
font-size: 15px; 
color: #666666; 
} 
a { 
color: #3389DF; 
text-decoration: none; 
} 
span { 
color: #333333; 
} 
strong { 
color: #000000; 
} 
</style> 
</head> 
<body> 
<div class='container'> 
<font color='#DF1F26'>05月22日</font> 
</div> 
</body> 
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
分享
微博
QQ
微信
回复
2024-11-06 17:50:33
如何写精华回答，获更多曝光？
发布
相关问题
HarmonyOS web组件显示h5页面，部分内容丢失
809浏览 • 1回复 待解决
HarmonyOS Web组件加载H5白屏
989浏览 • 1回复 待解决
Web组件和h5页面如何交互？
1087浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
1054浏览 • 1回复 待解决
HarmonyOS web组件加载h5，h5拉起摄像头
1654浏览 • 1回复 待解决
HarmonyOS web组件如何监听到H5的页面跳转
867浏览 • 1回复 待解决
HarmonyOS web组件怎么获取当前h5页面的title
555浏览 • 1回复 待解决
HarmonyOS 使用web组件加载h5页面，报错17100001
1035浏览 • 1回复 待解决
鸿蒙next 中 web组件和h5 页面如何交互
374浏览 • 1回复 待解决
HarmonyOS web组件H5页面如何选择手机图片视频
1205浏览 • 1回复 待解决
HarmonyOS web组件加载的h5页面中判断机型
806浏览 • 1回复 待解决
HarmonyOS Web组件加载H5页面获取网络状态失败
776浏览 • 1回复 待解决
HarmonyOS web折叠屏展示h5页面进入时会放大
1411浏览 • 1回复 待解决
H5中的图片在Web组件中显示异常
1030浏览 • 1回复 待解决
HarmonyOS web组件如何监听h5内部的router跳转
964浏览 • 1回复 待解决
HarmonyOS web与H5交互
1678浏览 • 1回复 待解决
如何设置Web组件加载的H5页面禁用手势缩放
3578浏览 • 1回复 待解决
在Web组件的H5页面中，如何使用a标签实现打开各种页面
2860浏览 • 1回复 待解决
HarmonyOS Web组件加载本地H5文件跨域
1080浏览 • 1回复 待解决
HarmonyOS 如何清理Web组件h5往localStorage写的数据
1346浏览 • 1回复 待解决
怎么禁止Web组件加载的H5页面长按复制粘贴功能？
1123浏览 • 1回复 待解决
Web中webview和H5交互
1933浏览 • 1回复 待解决
HarmonyOS H5页面无法自适应展示，类似浏览器展示H5页面
1139浏览 • 1回复 待解决
HarmonyOS原生中的web组件如何和组件内渲染的h5进行通信
1260浏览 • 1回复 待解决
HarmonyOS web通过loadData加载h5标签
1399浏览 • 1回复 待解决
提问
该提问已有0人参与 ，帮助了0人
相关讨论帖
基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例 0回复
基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例 0回复
HarmonyOS—使用Web组件加载页面 0回复
web组件的使用 0回复
webview加载Vue h5失败 0回复