HarmonyOS 鸿蒙Next中预览器和模拟器与真机显示有差异
HarmonyOS 鸿蒙Next中预览器和模拟器与真机显示有差异 本地模拟器 直接是在ide中创建了 mate60pro 分辨率是1260x2720 dpi 520，预览器中也是这个参数 但是同一个页面下 预览器和模拟器 与真机显示的不一样 ，使用display.getDefaultDisplaySync(); 得出真机的densityDPI是442， 如果将预览器和模拟器的参数设置成442的话 模拟器显示正常的 预览器显示就出问题了 字体变的很小。 这种情况该怎么办？
更多关于HarmonyOS 鸿蒙Next中预览器和模拟器与真机显示有差异的实战教程也可以访问 https://www.itying.com/category-93-b0.html
开发者您好，您之前反馈的问题已经解决，请您升级6.0.2版本验证。https://developer.huawei.com/consumer/cn/download/
更多关于HarmonyOS 鸿蒙Next中预览器和模拟器与真机显示有差异的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
我测试了下老版的IDE（5.1.1（19））显示是正常的，随即我用新版的IDE更换sdk19。都是macOS 26.1 (25B78) 发现还是有这个问题， mate60pro 在设置缩放到最小就是分辨率1260x2720 dpi 442 预览器设置分辨率1260x2720 dpi 442 就会复现这个预览器的问题
以下是 Index.ets
import { window } from '@kit.ArkUI';
import home from './home'
@Entry
@Component
struct Index {
uiContext = this.getUIContext();
aboutToAppear(): void {
window.getLastWindow(this.uiContext.getHostContext()).then(win => {
win.setWindowLayoutFullScreen(true) //这个地方设置false 会导致预览器页面白屏
})
}
build() {
Tabs({
barPosition: BarPosition.End,
}) {
TabContent() {
home()
}.tabBar('首页')
TabContent() {
home()
}.tabBar('个人')
TabContent() {
home()
}.tabBar('推荐')
TabContent() {
home()
}.tabBar('消息')
}
.width('100%')
.height('100%')
.barHeight(90) // 这地方设置高度 初始时字体大小也不对
}
}
然后是home.ets
@Component
export default struct home {
// 标题
@Builder
title(title: string) {
Text(title).fontSize(30).width('100%').textAlign(TextAlign.Start).padding({
top: 20
})
}
//内容
build() {
Column() {
Text('每日推荐').fontSize(30).width('100%')
Scroll(){
this.title('每日推荐')
}
this.title('每日推荐')
}
.height('100%')
.width('100%')
.padding({
top:200,
left:100
})
}
}
嗯嗯 我发现不是这个@Builder导致的 ，现在是发现在首页使用Tabs时 第一个TabContent中的子组件,其他的TabContent都是好的 第一个里面如果引入了@builder 还是 @components 在Scorll下都会导致字体失效 
这边按照你的方式大概写了下，预览的时候好像也是正确的，换成最新版本的IDE也是这样吗？我的代码如下：
// xxx.ets
@Entry
@Component
struct TabsExample {
@State fontColor: string = '#182431';
@State selectedFontColor: string = '#007DFF';
@State currentIndex: number = 0;
@State selectedIndex: number = 0;
private controller: TabsController = new TabsController();
@Builder tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.selectedIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider()
.strokeWidth(2)
.color('#007DFF')
.opacity(this.selectedIndex === index ? 1 : 0)
}.width('100%')
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Column(){
Column().width('100%').height('10%').backgroundColor('#00CB87')
home()
}
}.tabBar(this.tabBuilder(0, 'green'))
TabContent() {
Column() {
Column().width('100%').height('20%').backgroundColor('#007DFF')
home()
}
}.tabBar(this.tabBuilder(1, 'blue'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar(this.tabBuilder(2, 'yellow'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar(this.tabBuilder(3, 'pink'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
// currentIndex控制TabContent显示页签
this.currentIndex = index;
this.selectedIndex = index;
})
.onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
if (index === targetIndex) {
return;
}
// selectedIndex控制自定义TabBar内Image和Text颜色切换
this.selectedIndex = targetIndex;
})
.width(360)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}.width('100%')
}
}
@Component
struct home{
@Builder
title(title: string) {
Text(title).fontSize(30).width('100%').textAlign(TextAlign.Start).padding({
left: 20,
top: 20
})
}
build() {
Column(){
Text('首页').fontSize('30px').width('100%').padding({ left: 20 })
Scroll(){
this.title('每日推荐')
}
this.title('每日推荐')
Scroll(){
Column(){
Column(){
this.title('每日推荐')
}
}
}
}
}
}
如果换了IDE的版本还是不行，麻烦提供下可以复现的demo呢，
【背景知识】
【解决方案】 引入display工具，添加如下代码，获取真机屏幕尺寸。
import { display } from '@kit.ArkUI'
display.getAllDisplays((err, data) => {
let screenWidth: number = data[0].width
let screenHeight: number = data[0].height
console.log('width = ' + screenWidth + ', height = ' + screenHeight + ', dpi = '+display.getDefaultDisplaySync().densityDPI)
})
在设置->显示中修改了界面缩放到最小，用上述代码可以获取到screenWidth和screenHeight，检查下预览器的分辨率是否一致，设置为获取到的screenWidth和screenHeight试下呢。
@Builder title(title: string) {
Text(title).fontSize(30).width('100%').textAlign(TextAlign.Start).padding({
left: 20,
top: 20
})
}
Text('首页').fontSize(30)
鸿蒙Next中预览器和模拟器与真机显示差异主要由渲染引擎、系统资源和硬件差异导致。预览器基于轻量化引擎，模拟器在虚拟环境中运行，而真机使用完整的鸿蒙系统并调用实际GPU。三者环境不同，可能导致UI布局、组件渲染或动效的细微差别。
