問題概述
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/consumer/cn/forum/topic/0204423007060260633?fid=18
原作者：Mayism