tdesign-vue-next-starter icon indicating copy to clipboard operation
tdesign-vue-next-starter copied to clipboard

Published 20 hours ago • verified publisher icon Tencent

[组件库] 组件在高DPI下缩放异常

Open SuxueCode opened this issue 1 year ago • 7 comments

这个功能解决了什么问题

现在windows笔记本高DPI下，系统本身缩放在125%甚至150% 页面组件可能就会很大 我试了下适配zoom，高度会判定不正确 如果用scale是整体页面缩小了，也不太行

所以想问一下官方能优化一下吗？

你建议的方案是什么

兼容高DPI显示问题

SuxueCode avatar Oct 11 '23 09:10 SuxueCode

👋 @SuxueCode，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

github-actions[bot] avatar Oct 11 '23 09:10 github-actions[bot]

♥️ 有劳 @timi137137 @liweijie0812 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @SuxueCode 。

github-actions[bot] avatar Oct 11 '23 09:10 github-actions[bot]

没有明白你说的“组件很大”是指什么，根据公开的Demo来看这边是正常的 image

timi137137 avatar Oct 11 '23 13:10 timi137137

准确来说，应该是比例问题？ 我14寸的笔记本 这是100%比例下的： QQ截图20231012085103

这是125%比例下的： QQ截图20231012085158

因为系统放大了，响应的组件也放大了，希望还是能保持各缩放比例，显示大小一致

SuxueCode avatar Oct 12 '23 00:10 SuxueCode

@uyarn 有头绪吗，这感觉像是flex布局 or浏览器的问题

timi137137 avatar Oct 12 '23 04:10 timi137137

这.. 组件或者我们能做什么吗 都是px单位的组件

uyarn avatar Oct 12 '23 06:10 uyarn

应该是浏览器的问题，通过window.devicePixelRatio获取放大比例 要想保持一致效果，估计得通过zoom进行对应的缩放，但是zoom方案，内容部分的高度会计算不正确，会出现一块空白的地方 所以看看官方有什么好的方案吗？看情况应该是.tdesign-starter-layout中的height计算出了问题 image

SuxueCode avatar Oct 12 '23 06:10 SuxueCode