Charting Library图表在不同移动端设备上因为DPR不同，字体被放大问题怎么解决？

Question

Charting Library图表在不同移动端设备上因为DPR不同，字体被放大问题怎么解决？
中文文档: https://zlq4863947.gitbook.io/tradingview/home
附图：DRR为1的情况

附图：DRR为2的情况

附图：DRR为3的情况

发现了这个问题，但是没有找到解决的方法，所以寻求大家的帮助!

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题描述：Charting Library图表在不同移动端设备上因为DPR不同，字体被放大问题怎么解决？ 解决方案：

1. 使用rem或em作为字体单位：rem是相对于根元素（html）大小的单位，em是相对于父元素大小的单位，使用这两种单位可以让字体大小自适应不同的设备屏幕。例如：

   body {
     font-size: 16px;
   }
   h1 {
     font-size: 2rem; /* 相当于32px */
   }
   p {
     font-size: 1.5em; /* 相当于24px */
   }
   

2. 使用viewport单位：viewport单位是相对于视口大小的单位，可以根据设备屏幕大小适配字体大小。例如：

   body {
     font-size: 16px;
   }
   h1 {
     font-size: 10vw; /* 相当于视口宽度的10% */
   }
   p {
     font-size: 5vh; /* 相当于视口高度的5% */
   }
   

3. 使用JavaScript动态设置字体大小：可以通过JavaScript获取设备的DPR值来动态设置字体大小。例如：

   var dpr = window.devicePixelRatio;
   var baseFontSize = 16; // 默认基础字体大小
   document.documentElement.style.fontSize = baseFontSize * dpr + 'px';
   

其中，document.documentElement表示HTML元素，设置其字体大小可以影响整个页面的字体大小。baseFontSize可以根据实际情况进行适当调整。 案例代码：使用viewport单位适配字体大小

body {
  font-size: 16px;
}
h1 {
  font-size: 10vw; /* 相当于视口宽度的10% */
}
p {
  font-size: 5vh; /* 相当于视口高度的5% */
}

参考文献：https://www.w3cplus.com/css/px-to-rem-mixin.html，https://www.w3cplus.com/css/viewport-units.html，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat。