问题概述

text组件,设定宽度,文字铺满对应宽度,高分辨率机型加载文字压缩,联盟存在同样问题


复现步骤

1、加载demo

2、组件-->基础组件-->text组件


实际行为

1、低配机型加载正常 2、高分辨率机型加载文字压缩

51d1f7736ff8d126c1d6f3971f8a1aa8.pngf297dd5495adbf1a49c1c271c0a1cda3.png


验证

找了两台设备 ,其分辨率分别是2340 * 1080和2560 * 1600, 分别对一下样式进行验证

<text style="width: 172px;">text-align:center</text>2340 * 1080


9d14118fb2f96d1f8c1f14fe75c5591d.png 

可以明显看到完整贴和边缘

抓取布局得到布局宽度是 248 pixel

172 * (1080 / 750) = 247.68 四舍五入为248


2560 * 1600

f32311124c394b9e7dd7a40cff2a20a2.png

 

可以看到布局不下了,被换行了

抓取布局得到布局宽度是 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>
  • 效果

adab274ef72cfa071bafdce5f6a33553.png


  • 使用后

<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>
  • 效果

43dbc27257cd723f4e17e8cda000c931.png


适配方案
  • 首先找到不同分辨率的设备,使用ideinspact功能获取到期望的宽度值

2560 \* 1600需要的宽度是175px; 2340 * 1080需要的是172px;

  • 使用mediaquery对不同设备进行区分


这里判断一下设备宽度

@media (width > 1080) { 
       .text-test {
                   width: 175px;        
                   }    
         }


原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204423007060260633?fid=18

原作者:Mayism