optimize ipad

src/styles/core.scss

@@ -7,7 +7,14 @@ html {
 }
 
 /* 在移动端上设置不同的字体大小 */
-@media only screen and (max-width: 1280px) {
+/* iPad */
+@media screen and (max-width: 1280px) {
+  html {
+    font-size: 14px;
+  }
+}
+/* Mobile */
+@media screen and (max-width: 1000px) {
   html {
     font-size: 10px;
   }

src/ui/Shared/css.ts

@@ -2,7 +2,11 @@
 type CSSConfig = [string, [number, UNIT]][];
 
 // 以1280长度的viewpoint为基准进行缩放
-const VIEW_POINT_WIDTH_BASE = 1280;
+const VIEW_POINT_WIDTH_BASE_IPAD = 1280;
+const VIEW_POINT_WIDTH_BASE_MOBILE = 1000;
+
+const ZOOM_RATE_IPAD = 0.7;
+const ZOOM_RATE_MOBILE = 0.5;
 
 /** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
 const toCssProperties = (config: CSSConfig) =>
@@ -20,8 +24,13 @@ const toCssProperties = (config: CSSConfig) =>
     .reduce((acc, cur) => [...acc, cur], [] as [string, string][]);
 
 const pxTransform = (value: number, unit: UNIT) => {
-  if (unit === UNIT.PX && window.innerWidth < VIEW_POINT_WIDTH_BASE) {
-    return [value * 0.5, unit];
+  if (unit === UNIT.PX && window.innerWidth < VIEW_POINT_WIDTH_BASE_MOBILE) {
+    return [value * ZOOM_RATE_MOBILE, unit];
+  } else if (
+    unit === UNIT.PX &&
+    window.innerWidth < VIEW_POINT_WIDTH_BASE_IPAD
+  ) {
+    return [value * ZOOM_RATE_IPAD, unit];
   } else {
     return [value, unit];
   }