fix: 字体大小

src/core/main/setting.ts

@@ -351,26 +351,7 @@ function handleScreenSetting<T extends number | boolean>(
     n: T,
     o: T
 ) {
-    if (key === 'fullscreen') {
+if (key === 'heroDetail') {
-        const fontSize = mainSetting.getValue('screen.fontSize', 16);
-        const beforeIsMobile = isMobile;
-        // 全屏
-        triggerFullscreen(n as boolean).then(() => {
-            requestAnimationFrame(() => {
-                if (beforeIsMobile) {
-                    mainSetting.setValue(
-                        'screen.fontSize',
-                        Math.floor((fontSize * 2) / 3)
-                    );
-                } else if (matchMedia('(max-width: 600px)').matches) {
-                    mainSetting.setValue(
-                        'screen.fontSize',
-                        Math.floor((fontSize * 3) / 2)
-                    );
-                }
-            })
-        });
-    } else if (key === 'heroDetail') {
         // 勇士显伤
         core.drawHero();
     } else if (key === 'antiAlias') {
@@ -386,6 +367,9 @@ function handleScreenSetting<T extends number | boolean>(
     } else if (key === 'fontSize') {
         // 字体大小
         root.style.fontSize = `${n}px`;
+        const absoluteSize = (n as number) * devicePixelRatio;
+        storage.setValue('@@absoluteFontSize', absoluteSize);
+        storage.write();
     } else if (key === 'fontSizeStatus') {
         fontSize.value = n as number;
     }
@@ -543,10 +527,13 @@ mainSetting
     .setDescription('ui.mapScale', `楼传小地图的缩放，百分比格式`)
     .setDescription('screen.fontSizeStatus', `修改状态栏的字体大小`);
 
-Mota.requireAll('var').hook.once('mounted', () => {
+function setFontSize() {
-    if (storage.getValue('@@exitFromFullscreen', false)) {
+    const absoluteSize = storage.getValue('@@absoluteFontSize', 16 * devicePixelRatio);
-        const fontSize = mainSetting.getValue('screen.fontSize', 16);
+    const size = Math.round(absoluteSize / devicePixelRatio);
-        mainSetting.setValue('screen.fontSize', Math.round((fontSize * 3) / 2));
+    mainSetting.setValue('screen.fontSize', size);
-    }
+}
-    storage.setValue('@@exitFromFullscreen', !!document.fullscreenElement);
+setFontSize();
+
+window.addEventListener('resize', () => {
+    setFontSize();
 });

src/plugin/frame.ts

@@ -2,14 +2,28 @@ import { Ticker } from 'mutate-animate';
 
 const ticker = new Ticker();
 
-const span = document.createElement('span');
+const div = document.createElement('div');
-span.style.fontSize = '16px';
+const frameSpan = document.createElement('span');
-span.style.position = 'fixed';
+const innerSpan = document.createElement('span');
-span.style.right = '0';
+const realSpan = document.createElement('span');
-span.style.top = '0';
+
-span.style.fontFamily = 'Arial';
+[frameSpan, innerSpan, realSpan].forEach(v => {
-span.style.color = 'lightgreen';
+    v.style.fontSize = '16px';
-span.style.padding = '5px';
+    v.style.fontFamily = 'Arial';
+    v.style.color = 'lightgreen';
+    v.style.padding = '0 5px';
+    v.style.textAlign = 'right';
+});
+
+div.style.position = 'fixed';
+div.style.right = '0';
+div.style.top = '0';
+div.style.display = 'flex';
+div.style.flexDirection = 'column';
+
+div.appendChild(frameSpan);
+div.appendChild(innerSpan);
+div.appendChild(realSpan);
 
 let showing = false;
 let pause = false;
@@ -27,6 +41,8 @@ let inLowFrame = false;
 let leaveLowFrameTime = 0;
 let starting = 0;
 let beginLeaveTime = 0;
+let maxFrame = 0;
+let frameThreshold = 0;
 
 export function init() {
     const settings = Mota.require('var', 'mainSetting');
@@ -40,7 +56,11 @@ export function init() {
         lasttimes.push(time);
         const frame = 1000 / ((lasttimes[4] - lasttimes[0]) / 4);
         starting++;
-        if (frame < 50 && starting > 5) {
+        if (frame > maxFrame) {
+            maxFrame = frame;
+            frameThreshold = (frame * 5) / 6;
+        }
+        if (frame < frameThreshold && starting > 5) {
             if (!inLowFrame) {
                 performance.mark(`low_frame_start`);
                 inLowFrame = true;
@@ -62,7 +82,7 @@ export function init() {
                 );
                 beginLeaveTime = measure.duration;
             }
-            if (frame >= 50) {
+            if (frame >= frameThreshold) {
                 leaveLowFrameTime++;
             } else {
                 performance.clearMarks('low_frame_end');
@@ -86,7 +106,7 @@ export function init() {
             }
         }
         frameList.push();
-        span.innerText = frame.toFixed(1);
+        frameSpan.innerText = frame.toFixed(1);
         if (!marked) {
             frameList.push({
                 time,
@@ -103,13 +123,13 @@ export function getFrameList() {
 
 export function show() {
     showing = true;
-    document.body.appendChild(span);
+    document.body.appendChild(div);
     starting = 0;
 }
 
 export function hide() {
     showing = false;
-    span.remove();
+    div.remove();
 }
 
 export function isShowing() {
@@ -118,7 +138,7 @@ export function isShowing() {
 
 export function pauseFrame() {
     pause = true;
-    span.innerText += '(paused)';
+    frameSpan.innerText += '(paused)';
 }
 
 export function resumeFrame() {
@@ -129,3 +149,15 @@ export function resumeFrame() {
 export function isPaused() {
     return pause;
 }
+
+function setSizeText() {
+    innerSpan.innerText = `innerSize: ${window.innerWidth} x ${window.innerHeight}`;
+    realSpan.innerText = `realSize: ${Math.floor(
+        window.innerWidth * devicePixelRatio
+    )} x ${Math.floor(window.innerHeight * devicePixelRatio)}`;
+}
+setSizeText();
+
+window.addEventListener('resize', () => {
+    setSizeText();
+});