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>

加载页面片的代码:

Web({ 
  src: '', 
  controller: this.webController 
}) 
  .height(this.webHeight) 
  .horizontalScrollBarAccess(false) 
  .textZoomRatio(fp2px(100)) 
  .zoomAccess(false) 
  .width('60%')

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

HarmonyOS
2024-11-06 08:54:40
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
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>
分享
微博
QQ
微信
回复
2024-11-06 17:50:33
相关问题
HarmonyOS Web组件加载在线H5页面
202浏览 • 1回复 待解决
Web组件h5页面如何交互?
212浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
525浏览 • 1回复 待解决
H5中的图片在Web组件中显示异常
241浏览 • 1回复 待解决
HarmonyOS webH5交互
683浏览 • 1回复 待解决
Web中webview和H5交互
1052浏览 • 1回复 待解决
HarmonyOS web通过loadData加载h5标签
217浏览 • 1回复 待解决
HarmonyOS web原生和H5如何交互?
488浏览 • 1回复 待解决
Web能直接加载h5代码吗?
3043浏览 • 2回复 待解决
HarmonyOS webH5两端数据交互
811浏览 • 1回复 待解决