From cc25787878c37655ea6ce0cfe4d4fb1e3f224252 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sat, 4 Sep 2021 23:32:46 +0800
Subject: [PATCH] improve heartbeat bar rendering in different dpi

---
 src/components/HeartbeatBar.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 33b003db..f49b8756 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -124,9 +124,27 @@ export default {
     },
     mounted() {
         if (this.size === "small") {
-            this.beatWidth = 5.6;
-            this.beatMargin = 2.4;
-            this.beatHeight = 16
+            this.beatHeight = 16;
+
+            // Handle strange render problem in different DPI.
+            if (window.devicePixelRatio === 1.25) {
+                this.beatWidth = 5.6;
+                this.beatMargin = 2.4;
+
+            } else if (window.devicePixelRatio === 1.75) {
+                this.beatWidth = 5.7;
+                this.beatMargin = 2.4;
+
+            } else if (window.devicePixelRatio === 2.25) {
+                this.beatWidth = 5.8;
+                this.beatMargin = 2.4;
+
+            } else {
+                // 100%, 150%, 200% ...
+                this.beatWidth = 6;
+                this.beatMargin = 2;
+            }
+
         }
 
         window.addEventListener("resize", this.resize);