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

zbw_apple

2024-11-06 08:54:40

浏览

回答 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>