问题概述
text组件，设定宽度，文字铺满对应宽度，高分辨率机型加载文字压缩，联盟存在同样问题
复现步骤
1、加载demo
2、组件-->根底组件-->text组件
理论行为
1、低配机型加载失常 2、高分辨率机型加载文字压缩
验证
找了两台设施 ，其分辨率别离是2340 1080和2560 1600, 别离对一下款式进行验证
<text style="width: 172px;">text-align:center</text>2340 * 1080能够显著看到残缺贴和边缘
抓取布局失去布局宽度是 248 pixel
172 * (1080 / 750) = 247.68 四舍五入为248
2560 * 1600
能够看到布局不下了，被换行了
抓取布局失去布局宽度是 367 pixel
172 * (1600 / 750) = 366.9 四舍五入为367
验证后果
在2560 * 1600的设施上残缺布局这行文本须要175px;
在2340 * 1080的设施上残缺布局这行文本须要172px;
剖析
2560 * 1600
textsize = 64.0
2340 * 1080
textsize = 43.0
实际上是不同设施下的失效的textsize是不一样的，所以最终生成的布局宽度可能不是一个固定的宽度
解决
快利用提供了MediaQuery能力，能够用来适配不同分辨率的设施
在这里就能够应用mediaquery判断屏幕宽度的形式
例子
应用前
<template> <div> <text>text-align:left</text> </div></template> <style> .text-test { width: 172px; }</style>成果
应用后
<template> <div> <text class="text-test">text-align:left</text> </div></template> <style> @media (width > 1080) { .text-test { width: 175px; } } .text-test { width: 172px; }</style>成果
适配计划
首先找到不同分辨率的设施，应用ide的inspact性能获取到冀望的宽度值
2560 * 1600须要的宽度是175px; 2340 * 1080须要的是172px;
应用mediaquery对不同设施进行辨别
这里判断一下设施宽度
@media (width > 1080) { .text-test { width: 175px; } }原文链接：https://developer.huawei.com/...
原作者：Mayism