Merge pull request #13 from webduinoio/improvement/5901

shengyuan · web-flow · commit 094c4e9de1a4 · 2022-11-04T10:55:49.000+08:00
improvement/5901
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,9 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## 2022.11.1
 
+### Fixed
+
+- 平板或手機旋轉後，刷新萬用遙控器
+
 ### Added
 
-- 實作萬用遙控器 i18n 
+- 實作萬用遙控器 i18n
 
 ### Changed
 
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hant-Tw">
+<html lang="zh-Hant-TW">
   <head>
     <meta charset="UTF-8" />
     <meta
diff --git a/js/main.js b/js/main.js
@@ -378,4 +378,23 @@
     kebbi.addEventListener('touchstart', target);
   }
 
+   // 處理中間圖片跟隨視窗大小移動位置
+   function screenRotate() {
+    const kebbi = document.getElementById('svgKebbi');
+    const circle = document.querySelector('.circle');
+    const ww = content.offsetWidth;
+    const wh = content.offsetHeight;
+    const ox = (ww - kebbi.offsetWidth) / 2;
+    const oy = (wh * 0.8 - kebbi.offsetHeight) / 2;
+    kebbi.style.left = `${ox}px`;
+    kebbi.style.top = `${oy}px`;
+    circle.style.width = `${ww * 0.4}px`;
+    circle.style.height = `${ww * 0.4}px`;
+    circle.style.left = `${(ww - circle.offsetWidth) / 2}px`;
+    circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`;
+  }
+
+  window.addEventListener('resize', screenRotate);
+  screenRotate();
+
 }();
